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本 书 以 杰 瑞 教育 前 端 课程 大 纲 为 基准 , 由 浅 及 深 地 讲解 了 Web 前 端 
发 所 需 的 知识 。 全 书 共 3 篇 ， 涵 盖 了 HTML5、CSS3 以 及 JavaScript 等 多 
项 技术 ， 并 提供 学 习 视 频 ， 循 序 渐进 地 讲解 每 个 知识 点 ， 同 时 每 章 均 配 有 
课堂 案例 与 练习 ， 让 读者 能 够 在 学 习 的 过 程 中 进行 实践 操作 ， 提 高 动手 能 
力 。 本 书 可 以 帮助 初学 者 顺利 步 入 Web 前 端 开发 领域 , 也 可 作为 开发 
的 参考 手册 以 及 大 中 专 院 校 与 培训 机 构 的 教材 。 
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的 到 来 ，HTML 的 最 新 版 本 一 一 HTMILS 应 运 而 生 , 它 的 
了 Flash 插件 在 网 页 开发 中 的 垄断 地 位 ,优化 了 移动 互联 网 的 体验 ， 








等 手机 软件 。 





为 了 帮助 更 多 的 读者 进入 移动 互联 网 行业 。 杰 瑞 教 育 组 织 专业 讲师 团队 ， 


编写 工作 。 杰 瑞 教育 成 立 于 2011 年 ， 专 注 于 互联 网 人 才 培 训 领 志 
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此 纪 90 年 代 ， 它 带 来 了 Web 行业 的 一 片 繁 荣 。 而 随 着 移动 互联 网 时 代 
现 颠 覆 了 互联 网 开发 的 格局 ， 取 代 
至 颠覆 了 Android、iOS 


成 了 此 书 的 


各 地 互联 网 


企业 输送 优秀 IT 人 才 数 干 人 。 本 书 以 杰 瑞 教育 Web 前 端 课程 大 纲 为 基准 ， 结合 杰 瑞 教育 线 下 




















培训 授课 内 容 与 课堂 案例 编写 而 成 。 





为 保证 学 习 效 果 ， 本 书 秉承 “ 纯 干 货 ” 的 原则 ， 帮 助 广大 读者 通 





俗 的 案例 ， 学 习 更 全 
本 书 特点 














本 书 的 特点 主要 体现 在 以 下 几 个 方 





> 配套 资源 丰富 。 








面 的 知识 体系 。 





























为 方便 读者 自学 ， 











本 书 随 书 附 赠 教学 视频 以 及 案例 源 代码 等 学 习 
> 专业 的 技术 支持 服务 。 



































过 更 精简 的 语言 、 


资源 。 


更; 
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为 保证 读者 学 习 效果 ， 杰 瑞 教 育 将 为 读者 提供 专业 的 技术 支持 服务 ， 解 决 读者 学 习 的 后 


顾 之 忧 。 





> 专业 的 就 业 咨询 服务 。 
对 那些 顺利 完成 本 书 学 习 任务 ， 并 达到 相应 技术 要 求 的 学 员 ， 杰 珊 教 育 将 有 专业 的 就 业 
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授 的 所 有 知识 内 容 , 均 来 自 杰 








团队 ， 为 广大 读者 在 就 业 过 程 中 过 到 的 问题 提 
的 知识 体系 。 

















共 就 业 咨 询 服务 。 
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前 端 课程 教学 大 纲要 求 进行 本 书 知识 体系 的 编写 。 
> 每 章 均 提 供 案 例 与 习题 。 











本 书 在 注重 理论 知识 的 同时 ， 





案例 与 章节 
本 书 内 容 
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本 书 分 为 3 篇 ， 共 18 章 。 


第 1 篇 HTML5 (第 1~4 章 ) 首先 讲授 的 是 HTML5 的 基础 入 门 知识 ， 紧 接着 
表格 与 表单 的 使 用 。 
识 开始 ， 讲 解 了 CSS 样式 表 与 选择 


块 级 标签 与 行 级 标签 ， 


第 2 篇 CSS3 (第 5 一 10 章 ) 首 
器 的 使 用 (包括 CSS3 新 增 选 择 器 )， 并 习 








最 后 详细 地 介 色 
先 从 




















教育 多 年 教学 经 验 的 积累 



































CSS3 的 基础 知 
点 讲解 了 CSS 中 
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E 以 及 CSS3 的 新 
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按照 杰 瑞 教 育 Web 


加 注重 学 员 的 动手 实践 能 力 ， 每 章节 均 附 有 完整 的 草 节 


练习 ， 帮 助 读 者 提高 动手 操作 能 
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紧 接着 讲解 了 CSS 中 的 盒 模型 、 浮 动 、 定 位 的 相关 知识 ， 最 后 介绍 移动 开发 、 响 应 式 与 弹 
性 布局 。 

第 3 篇 JavaScript (第 11 一 18 章 ) 从 JavaScript 的 语法 基础 开始 ， 逐 步 讲 解 JavaScript 
中 的 变量 与 运算 符 、 分 支 与 循环 、 函 数 、BOM 与 DOM、 数 组 与 对 象 、 正 则 表达 式 等 相关 
知识 点 ， 并 通过 学 习 JavaScript 面向 对 象 来 结束 这 一 篇 章 的 学 习 。 这 部 分 内 容 是 全 书 的 重点 
也 是 难 












































阅读 本 书 的 读者 


适 
> 希望 学 习 并 从 事 Web 前 端 行业 的 初学 者 。 
> 
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点 
全 
记 


























具有 一 定 的 工作 经 验 但 希望 夯实 基础 知识 的 前 端 开 发 工程 师 。 
相关 专业 大 中 专 院 校 或 培训 学 校 的 学 生 。 

> 需要 备课 教材 的 大 中 专 院 校 或 培训 学 校 的 教师 。 

> 希望 图 入 Web 前 端 开发 的 其 他 软件 工程 师 。 


阅读 建议 


> 没有 基础 的 读者 应 从 第 1 章 开 始 顺 序 阅 读 ， 尽 量 不 要 跳跃 学 习 。 

> 有 一 定 工作 经 验 的 开发 工程 师 可 以 根据 需要 选择 所 需 革 节 阅 读 。 

> 学 练 结合 ， 将 书 中 涉及 的 案例 与 练习 亲自 动手 做 一 这， 会 加 深 对 内 容 的 理解 。 
> 认真 阅读 书 中 的 源 代码 ， 养 成 恨 好 的 编码 习惯 。 

> 结合 图 书 配 套 视频 学 习 ， 可 以 帮助 读者 更 好 地 掌握 新 的 知识 点 。 

> 养 成 恨 好 的 目 学 习惯 ， 这 将 对 读者 以 后 的 发 展 至 关 重 要 。 

> 提升 解决 问题 的 能 力 ， 学 会 利用 网 络 资源 解决 问题 。 


本 书 作者 


本 书 由 王涛 、 杨 延 成 、 姜 浩 编写 ， 姜 浩 、 王 梁 类 负责 本 书 的 资料 与 案例 整理 ， 杨 延 成 负 
责 全 书 的 最 后 审定 工作 。 
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HTML 是 HyperText Markup Language( 超 文本 标记 语言 ) 的 缩写 ， 它 是 用 于 创建 网 页 
的 标准 标记 语言 。HTML 使 用 标记 标签 来 描述 网 页 ， 由 浏览 器 来 解析 ， 即 使 用 HTML 来 建 
立 Web 站 点 ， 通 过 Web 浏览 器 读 取 HTML 文档 ， 并 以 网 页 的 形式 显示 出 来 。 

欢迎 各 位 读者 步 入 HTMLS5 的 世界 。 本 书 将 立足 企业 需求 ， 从 最 基础 的 知识 点 讲解 ， 一 
5; 步 带领 大 家 成 为 一 名 优秀 的 HTMLS5 开发 工程 师 。 

本 章 学 习 目 标 : 

> 了 解 HTML 的 发 展 历 程 及 影响 。 

> 安装 HTML 的 开发 软件 。 

> 掌握 HTML 的 基本 结构 与 语法 。 
本 章 首先 介绍 HTMLS 的 由 来 ，HTMLS 与 HIMIL4 的 区 别 ， 然 后 介绍 学 习 HTML 前 的 
准备 工作 ， 最 后 介绍 HTML5 的 语法 与 结构 ， 并 完成 一 个 简单 的 网 页 页 面 。 
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1.1 认识 了 IML5 




















HTML5 是 HTML 最 新 的 修订 版 本 ，2014 年 10 月 由 万 维 网 联盟 (W3C) 完成 标准 秆 
定 。HTMLS 是 跨 平台 的 ， 被 设计 为 在 不 同类 型 的 硬件 (台式 计算 机 、 平 板 计算 机 、 手 机 、 
电视 机 等 ) 上 运行 的 语言 。 
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通俗 来 讲 ，HTML 就 是 网 页 的 源 代 码 ， 任 何 一 个 网 页 都 是 由 一 行 行 HTML 代码 编写 而 
成 的 。 

HTML 的 第 一 个 版 本 诞生 于 20 世纪 七 八 十 年 代 ， 当 时 互联 网 没有 普及 ， 也 没有 专业 的 
组 织 制定 HTML 规范 。 因 此 ， 那 个 时 代 HTML 的 发 展 非常 混乱 ， 并 没有 受到 开发 者 的 重 
视 ， 更 没有 得 到 大 幅度 的 发 展 ，HTML 还 是 一 门 冷门 的 语言 。 

HTML 真正 崛起 是 从 1998 年 诞生 的 HTML4.0 版 本 开始 的 ， 紧 接着 在 1999 年 更 新 了 
HITML4.01 版 本 。 自 HIML4.01 版 本 以 后 ，Web 世界 经 历 了 巨变 。 此 时 ， 被 称 为 BAT 三 巨 
头 的 百度 、 阿 里 巴巴 、 腾 讯 等 互联 网 企业 相继 崛起 ， 标 志 着 互联 网 时 代 的 到 来 。 

HTML5 是 由 W3C (万 维 网 联盟 ) 于 2007 年 正式 立项 的 ， 直 至 2014 年 10 月 底 ， 这 个 
长 达 八 年 的 规范 终于 制定 完成 并 公开 发 布 。 

HTMLS5 将 会 取代 HTML4.01、XHTML1.0 标准 ， 使 网 络 标准 满足 互联 网 应 用 迅速 发 展 
的 需求 ， 为 移动 平台 带 来 多 媒体 ， 推 动 Web 进入 新 的 时 代 。 
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除了 本 身 的 HTML5 标记 之 外 ， 广 义 的 HTML5 还 包含 CSS3 与 JavaScript。 由 于 
HTML5 设计 的 目的 是 在 移动 设备 上 文 持 多 媒体 ， 所 以 新 的 语法 特征 被 引进 以 文 持 这 一 点 ， 
但 是 基本 的 标记 语法 并 没有 大 的 改变 。 下 面 列 出 HTML4 与 HIMLS 的 主要 区 别 。 

1. 语法 简化 
更 简单 的 doctype 是 HTML5 中 众多 新 特征 之 一 。 在 HTML5 中 ， 头 部 只 需 要 写 
<IDOCTYPE html> 即 可 。HTMLS 的 语法 兼容 HTML4 和 XHTML1， 但 不 兼容 SGML。 

2. 新 增 语义 化 标签 
新 增加 的 语义 化 标签 (如 <header>、<footer> 、<section> 等 ) 使 得 网 页 的 可 读 性 变 得 更 
高 ， 也 更 加 明确 地 表示 出 网 页 的 结构 ， 对 于 搜索 引擎 优化 SEO) 有 很 大 帮助 。 

3. 新 的 媒体 标签 
新 的 <audio> 和 <video> 标 签 可 以 用 来 嵌入 音频 文件 和 视频 文件 。 这 些 标签 的 使 用 让 网 页 
播放 音频 、 视 频 更 加 方便 。 

4. 使 用 画布 标签 绘制 图 形 

<canvas> 标 签 具有 绘图 功能 ， 通 过 与 JavaScript 脚本 的 搭配 ， 可 在 网 页 上 绘制 图 像 。 

5. 新 的 表单 设计 
在 HIML5 中 ， 表 单 增加 了 新 元 素 ， 也 为 表单 元 素 增 加 了 许多 新 属性 ， 让 表单 的 使 用 更 
加 便利 。 

6. 废除 了 一 些 旧 标签 

HTML5 废除 了 一 些 标签 ， 其 中 大 部 分 为 网 页 美化 标签 ， 如 <center> 、<font> 、<tt>、 
<big>、<dir> 、<marquee>、<frame> 等 。 
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1.2 学 习 HTMLs 前 的 准备 工作 


在 开始 编写 HIMLS 网 页 之 前 ， 首 先 要 准备 好 编写 HTMLS 的 操作 环境 和 浏览 器 环境 。 
本 节 介 绍 常 用 浏览 器 和 常见 的 HTML5 开发 软件 ， 以 及 如 何 创 建 一 个 HTMLS5 页 面 。 
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浏览 器 是 指 可 以 显示 网 页 服务 器 或 者 文件 系统 的 HTML 文件 (标准 通用 标记 语言 的 一 个 
应 用 ) 内 容 ， 并 可 以 让 用 户 与 HTML 文件 交互 的 一 种 软件 。 浏 览 器 可 以 解析 HTML 文件 ， 
它 不 会 显示 HTML 标签 ， 而 是 使 用 标签 来 解释 页 面 的 内 容 。 

1， 常 用 浏览 器 

1) Internet Explorer 是 微软 公司 推出 的 一 款 网 页 浏览 器 。 全 称 Microsoft Internet 
Explorer (6 版 本 以 前 ) 和 Windows Internet Explorer (7、8、9、10、11 版 本 ) ， 人 简称 正 。 
在 IE7 以 前 ， 中 文 直译 为 “网 络 探 路 者 ”， 但 在 正 7 以 后 便 直 接 称 为 “IE 浏览 器 ”。IE9 和 
IE10 支持 部 分 HTMLS 技术 。 

2013 年 10 月 IE11〈11.0.9600.16384) 问世 ， 由 于 HTML5 标准 规范 于 2014 年 10 月 公 
布 ， 所 以 下 11 不 可 能 完全 文 持 HTML5 的 所 有 技术 。 


































































































































































































2015 年 微软 公司 放弃 正 浏览 



































支持 HTML5 方面 有 








了 入 








2) Google Chrome 是 | 





大 提高 。 


一 款 网 

















公司 开发 的 





Google 天 网 








AS 区 


御 1 蛙 





HTMLS5 学 





习 概述 


出 Microsoft Edge 浏览 器 。Microsoft Edge 浏览 器 在 


页 浏览 器 。Google Chrome 的 特点 是 


简洁 、 快 速 。 由 于 Google Chrome 拥有 更 强大 的 JavaScript V8 引擎 ， 使 其 拥有 更 快 的 解析 和 


执行 速度 。2016 年 12 月 ，Google Chrome 
3) Mozilla Firefox 中 文 俗称 “火狐 ” 

， 文 持 多 种 操作 系统 。 它 

内 核 介绍 


人 码 的 网 页 浏览 


1A SR 
2. 浏览 器 EE 





巴 HTMLS 设 为 网 








浏览 器 内 核 主要 


分 成 两 部 分 : 演 
1) 演 染 引擎 负责 获取 网 页 内 





A 














等 ) 以 及 计 
户 端 及 其 他 需 





语法 解释 也 会 有 不 同 ， 所 以 泻 染 


网 页 的 显示 方式 ， 然 后 输 
要 编辑 、 显 示 网 络 内 容 的 应 用 程序 都 需要 内 核 。 


2) 引擎 负责 





开始 ， 


染 引 擎 和 JavaScript 引擎 并 没有 
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站 站 
是 





和 泻 染 
见 的 浏览 器 内 核 见 表 1-1。 


























淋 的 效果 也 不 同 。 


(正式 缩写 为 Fx 或 多 ) ， 是 
是 在 网 页 开发 调试 过 程 中 常用 的 


容 (HTML、XML、 图 像 等 )、 
至 显示 器 或 打印 机 。 所 有 网 页 浏览 器 、 电 子 邮 件 客 
核 的 不 同 对 于 网 页 的 


页 核心 内 容 。 























染 引 擎 和 JavaScript 引擎 。 





个 自由 及 开放 源 代 
一 款 浏览 

















整理 




















浏览 器 内 





解析 和 执行 JavaScript 来 实现 网 页 


的 动态 








区 分 得 很 明确 























洒 引 擎 。 











效果 。 
， 后 来 ，JavaScript 引擎 越 来 越 独 


信息 (如 加 入 CSS 























































































































表 1-1 常见 的 浏览 器 内 核 
浏览 器 内 核 分 类 常见 浏览 器 备 注 
下 浏览 器 、360 安全 浏览 器 、 猎 豹 安全 浏 其 中 部 分 浏览 器 的 新 版 本 是 “ 双 
Trident(IE 内 核 ) 览 器 、 傲 游 浏览 器 、 百 度 浏览 器 、 世 界 之 窗 | 核 ”， 甚 至 是 “多 核 ”， 其 中 一 个 内 核 是 
浏览 器 、2345 浏览 器 、 搜 狗 高 速 浏览 器 等 Trident， 然 后 增加 一 个 其 他 内 核 
, Netscape6 及 以 上 版 本 ，Mozilla Firefox、 
4 特点 是 从 
Gecko(Firefox 内 核 ) Mozilla SeaMonkey 等 Gecko 的 特点 是 代码 完全 公开 
本 下 te Presto 内 核 现 已 停止 开发 并 废 齐 。Opera 
广 ) (已 废弃 al2. 更 早 朋 曾经 采 4 记 
Presto(Opera 前 内 核 ) (已 废弃 ) Operal2.17 及 更 早 版 本 曾经 采用 的 内 核 现 已 改 用 Google Chrome 的 Blink 内 核 
区 是 三 下 
Webkit(Safari 内 核 ,Chrome 内 | Chrome、Apple Safari (Windows/Mac/iPhone/ Ge -eS i ee 0 
核 原型 ,开源 ) ipad) 、Android 默认 浏览 器 等 Wabi 的 个 雪 必定 WW 
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1. HBuilder 


HBuilder 是 DCloud (数字 天 党 
Java 编写 的 。 它 基于 2 








主体 是 由 








2. Dreamwea 


Adobe Dreamweaver 简称 “DW”， 
司 〈 该 公司 成 立 于 1992 年 ， 


Ver 





出 的 

















发 效率 。 同 时 ， 它 还 





中 文 名 称 “梦想 编织 


2005 年 被 Adobe 公司 收购 〉 开 发 的 集 网 页 第 


于 一 身 的 所 见 即 所 得 网 页 代码 编辑 器 。 


3. WebStorm 
WebStorm 


是 JetBrains 公司 旗下 一 款 


包括 最 全 面 的 语法 库 和 浏 ! 











球 支 持 HIMLS 的 Web 开 
所 以 顺 其 自然 地 兼容 了 Eclipse 的 插件 。 

快 是 HBuilder 的 最 大 优势 ， 通 过 a Bo an I 大 幅 
HTML、JavaScript、CSS 的 开 








”， 是 美国 






































JavaScript 开发 工 


i 








发 软件 





。 HBuilder 


提升 








稚 











览 器 兼容 


MAC 
| 作 和 


目前 ，WebStorm 被 广大 中 





ROMEDIA 公 
网 站 管理 功能 
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Web 前 端 学 习 笔 记 : HTML5+CSS3+JavaScript 


JavaScript 开发 者 誉 为 “Web 前 端 开发 神器 ”“ 最 


IDE” 等 。 

4. Notepad++ 

Notepad++ 是 Windows 操作 系统 下 的 一 套 文本 编辑 器 ， 有 完整 的 中 文化 接口 并 文 持 多 国 
语言 编写 的 功能 (UTF8 技术 )。 

本 书 选 择 HBuilder 进行 讲解 和 开发 。 
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首先 要 安装 HBuilder。 下 载 地 址 为 http:Wwww.dcloud.io/， 下 载 后 的 安装 文件 为 一 个 压缩 


最 强大 的 HIML5 编辑 器 ”“ 最 智能 的 JavaScript 



































包 ， 解压 到 想 要 存放 的 目录 ， 打 开 使 月 





昌 即 可 。 


1) 打开 HBuilder， 单 击 “ 文 件 ” 一 “新 建 ” 一 “Web 项 目 ”， 


H 
Er 编辑 (E) 插入 人 转 义 (DO) 选择 (S) ， 跳 转 (G) 章 找 (运行 (R) 发 行 (8) 工具 (T) 视图 (V) 帮助 (H) 
新 建 (W) 





2) 在 弹出 的 对 语 4 





存放 位 置 ， 单 击 “ 完 


如 





图 1-1 所 示 。 











Ctrl+N 


网 移动 App 


























Br 
打开 目录 (M).… 克 Web 基 目 
打开 文件 (中 .… 省 目录 (P 
| 导入 0- 回 ”HTML 文件 
[6G lon 国 JavaScript 文 件 
回 “css 文件 
关闭 (QO Ctrl+W 
关闭 其 他 文件 (各 加 ”ASP 文件 
全 部 关闭 [0 Ctr+Shit+W | 国 ASPX 文 件 
图 “Coffeescript 文 件 
保存 (S) Cults | 襄 |ERB 文 件 
另存 为 (A).. Jjsp 文 件 
全 部 保存 四 Ctrl+Shift+s po 
移动 (V).… 区 Less 文 件 
重 命名 忆 | 芒 PH 了 文件 
删除 (D) 删除 | 太 ”MarkDown 文 件 
RF(E) F5 | 网 RB 文件 
交行 定 界 符 转 撞 为 MV) El Ee 
其 他 编 到 方式 打开 (N) | | SoSS 
加 ”TypeScript 文 件 
打印 (P)… 日 Txrx 件 
属性 (R) Alt+Enter | 回 “Vue 文 件 
重新 启动 国 ” 自 定义 文件 (U) 
| 过 400 [5 其他 (N).. 
图 1-1 创建 Web 项 目 





创 理 Wr:b 项 目 





E 中 输入 项 目 名 称 ， 





如 HellowWorld， 再 单 击 “ 浏 览 ” 按 钮 ， 
”按钮 ， 如 图 1-2 所 示 。 


请 巡 入 项 目 名 符 并 且 壬 择 一 个 异 板 -. 


项 目 信号 


项 目 名 称 ; HellowWorld 


位 疆 : C\Users\jerehedu\Documents\HBuilderProject 


迁 提 模板 


回 默认 项 目 


野 认 项 目 只 包 会 index.html 文 件 
该 藉 目 可 以 让 你 快速 了 解 HBuilder . 起 一 下 吧 ! 
币 俩 WEB App， 使 用 此 模板 交 持 币 俩 1S5-SDK 的 提示 


口 Hello HBuilder 


站 铂 便 项目 





三 法 


ECMAScript 6 


®D 

















图 1-2 设置 项 








完 
CE 
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3) 创建 完成 后 会 在 HBuilder 窗口 左 侧 显示 出 刚刚 创建 的 项 目 ， 具 体 项 目 结构 如 图 1-3 
所 示 。 




















4 (7 HelloWorld 
ny css 
[nr img 
mr js 





图 1-3 项 目 结构 


项 目 结构 包含 的 文件 夹 说 明 见 表 1-2。 








表 1-2 默认 项 目 结构 说 明 































































































文件 或 者 文件 夹 作 
Css 来 存放 项 目 中 所 用 到 的 样式 表 (css) 文 件 
img 来 存放 项 目 中 所 用 到 的 图 片 资源 文件 
js 来 存放 项 目 中 所 用 到 的 JavaScript 脚本 文件 
index.html 默认 创建 的 html 文件 
这 几 个 文件 夹 及 文件 是 HBuilder 默认 创建 的 ， 后 续 可 以 根据 项 目 实际 情况 进行 增加 或 
者 删除 相应 文件 及 文件 夹 。 











双击 打开 index.html， 文 件 中 有 一 段 默认 代码 ， 此 时 就 完成 了 一 个 基础 的 Web 项 目的 创 
建 。 默 认 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> </title> 
</head> 
<body> 
</body> 
</html> 


13 HTML5 的 语法 与 结构 


























HTMLS 作为 一 门 语 言 ， 它 具有 自己 的 结构 和 语法 ， 主 要 是 用 标签 来 组 织 。 本 节 对 
HTML5 文档 结构 及 部 分 标签 进行 相应 说 明 。 
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学 习 一 门 语言 的 重点 ， 就 是 学 习 这 门 语言 的 基本 语法 。 当 然 学 习 HIMLS5 也 不 例外 ， 
HTML5 由 一 个 个 标签 组 合 而 成 ， 标 签 又 有 上 自己 的 属性 和 属性 值 ， 接 下 来 进入 正题 。 
1，HTMLS 标签 
标签 是 HTMLS 最 基本 单位 和 最 重要 的 组 成 。 使 用 “<” 和 “>” 括 起 来 ， 标 签 都 是 闭合 
5 





















































Web 前 端 学 习 笔 记 : HTML5+CSS3+JavaScript 








的 《规范 )。 标 签 分 为 单 标记 和 双 标 记 ， 单 标记 上 只 有 起 始 标记 而 没有 结束 标记 ， 双 标记 是 成 





对 的 开始 标记 和 结束 标记 ， 基 本 语法 如 下 : 





<hr> <!-- 单 标记 
<title></title> <!-- 标 准 标 记 ， 前 了 





也 叫 自 结束 标记 --> 
j 是 开始 标记 ， 后 面 是 结束 标记 ， 标 记 可 以 嵌 套 ， 但 不 能 交叉 风 套 -> 
















































































HTMIL5 标签 是 有 相应 语义 的 〈 表 1-3)， 语 义 是 由 浏览 器 来 进行 表现 。 












































表 1-3 部 分 HTMLS 标签 
HTML5 标签 作 HTML5 标签 作 
<html> 定义 html 文档 <body> 定义 文档 体 body 
<head> 定义 文档 头 信息 <title> 定义 文档 的 标题 
<a> html 链接 标签 <img> html 图 像 标签 
<div> html 层 <table> 定义 html 表格 
<tr> 定义 表格 行 <td> 定义 表格 列 
<form> html 表单 标签 <input> 定义 表单 的 输入 域 

















2. HTMLS 标签 属性 
标签 属性 是 标签 的 一 部 分 ， 用 于 包含 








N29 /ES 
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性 和 属性 值 成 对 出 现 ， 基 本 语法 如 下 : 


0 含 额 外 的 信息 。 一 个 标签 中 可 以 有 多 个 属性 ， 并 且 属 





<img src="../image/a.png” width="“100” height=“100”/> 





<!-- 结构 是 














属性 名 =” 属 性 值 ”--> 














3. HTMLS5 文档 注释 




















<!-- 这 是 HIML5 注释 --> 
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HTMLS 文件 均 以 <html> 标 记 玫 
部 和 主体 两 个 部 分 的 内 容 ， 在 头 部 标记 <head></head> 里 可 以 定义 标题 、 检 


体 <body></body> 中 的 内 容 就 是 浏览 昌 




















F 始 ， 以 </html> 标 记 结 束 。 




















HTML4.01 





要 显示 的 信息 。 





> 前 的 文档 声明 ， 语 法 结构 如 下 : 


<IDOCTYPE html PUBLIC "-/W3C//DTD HTML 4.01/EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 


HTMILS5 已 经 对 文档 声 











<IDOCTYPE html> 


HTMLS 文档 的 基本 结构 ， 代 码 示例 如 下 : 











明 进 行 了 简化 ， 语 法 结构 如 下 : 





注释 是 对 文档 的 解释 ， 浏 览 器 不 会 对 注释 内 容 进 行 解析 并 呈现 到 页 面 上 ， 只 有 查看 
HTML5 文件 源 代码 时 才 会 看 到 注释 ， 基 本 语法 如 下 : 
































HTMLS5 文件 包含 头 
fF 式 等 ， 文 档 的 主 
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<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 我 的 第 一 个 网 页 </title> 
</head> 
<body> 
Hello World! 
</body> 
</html> 





注意 : 页面 中 必须 有 文档 声明 ， 而 且 必须 在 文档 页 面 的 第 一 行 ! 
1， 头 部 内 容 

<head> 标 签 用 于 表示 网 页 的 元 数据 ， 即 描述 网 页 的 基本 信息 。 其 中 主要 包含 以 下 标签 ， 
1) <tite> 标 签 用 于 定义 页 面 的 标题 ， 是 成 对 标记 ， 位 于 <head> 标 签 之 间 。 

2) <meta> 标 签 用 于 定义 页 面 的 相关 信息 ， 为 非 成 对 标记 ， 位 于 <head> 标 签 之 间 。 

3) <meta> 标 签 可 以 描述 页 面 的 作者 、 摘 要 、 关 键 词 、 版 权 、 自 动 刷 新 等 页 面 信息 。 
下 面具 体 介绍 <meta> 标 签 的 常用 属性 : 

1) charset 属性 : 设置 文档 的 字符 集 编码 格式 。 

HTMLS 中 设置 字符 集 编码 ， 基 本 语法 如 下 : 















































































































































<meta charset="UTF-8"> 








HTML4.01 之 前 的 文档 设置 字符 集 编码 ， 基 本 语法 如 下 : 
































<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

















常见 的 字符 集 编码 格式 包括 GB2312、GBK、UTF-8 等 。 

GB2312 是 国标 码 ， 简 体 中 文 。GBK 是 扩展 的 国标 码 。UTF-8 是 一 种 针对 Unicode 的 可 
变 长 度 字符 编码 ， 也 称 万 国 码 (常用 )。 

2) http-equiv 属性 : 将 信息 写 给 浏览 器 看 ， 让 浏览 器 按照 这 里 面 的 要 求 执行 ， 可 选 属性 
值 有 Content-Type〈 文 档 类 型 )、refresh《〈 网 页 定时 刷新 )、setrcookie〈 设 置 浏览 器 cookie 组 


PS 


存 )， 需 要 配合 content 属性 使 用 。http-equiv 属性 只 是 表明 需要 设置 哪 一 部 分 ， 具 体 的 设置 





















































































































































内 容 需 要 放 到 content 属性 中 。 
基本 语法 如 下 : 









































<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 


























3) name 属性 : 将 信息 写 给 搜索 引擎 看 。 使 用 方法 同 http-equiv 属性 。 

常用 的 属性 值 有 author (作者)、keywords (网 页 关键 字 )、description〈 网 页 描述 )， 它 
们 在 网 页 中 必 不 可 少 。 
基本 语法 如 下 : 


<!-- 作 者 --> 


<meta name="author" content="http://www.jredul00.com" /> 
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<!-- 网 页 关键 字 : 多 个 关键 字 用 英文 逗号 分 隔 --> 
<meta name="keywords" content="HTMLS, 网 页 ,Web 前 端 
<!-- 网 页 描述 : 搜索 网 站 时 ，tite 下 面 的 解释 文字 。--> 





<meta name="description" content=" 这 是 我 在 杰 瑞 教育 开发 的 第 一 个 网 页 。"/ 


片 作为 网 页 图 标 。<link> 标 签 有 如 下 
处 选 icon。 








使 用 <link> 标 签 可 以 加 载 一 个 图 
1) rel 属性 : 声明 被 链接 文件 与 当前 文件 的 关系 ， 出 




















2) type 属性 : 声明 被 链接 文件 的 类 型 ， 可 以 省 略 。 
3) href 属性 : 表示 图 片 的 路 径 地 址 。 
基本 语法 如 下 : 


<link rel="icon" type="image/x-icon" href="img/icon.jpg" /> 


页 标签 中 的 标题 





运行 代码 ， 在 网 


1-4 所 示 。 


J 发 "> 














字 前 显示 一 个 小 图 片 ， 这 就 是 网 页 的 图 标 。 效 果 如 




















像 、 表 格 、 表 单 等 元 素 。 例 如 ， 






































图 1-4 网 页 图 标 
2. 主体 内 容 
标记 <body></body> 包 含 文档 所 有 的 内 容 ， 如 文字 、 
在 <body> 中 使 用 语义 化 标记 设计 网 页 ， 基 本 语法 如 下 : 
<body> 
<header> 网 站 主题 </header> 
<nav> 连 接 菜单 </nav> 
<article> 
主 内 容 
<section> 
章节 段落 
</section> 
</article> 


1.4 


言 恩 以 及 主体 部 分 的 语句 。 我 的 第 


<aside> 侧 边栏 </aside> 
<footer> 页 脚 </footer> 
</body> 


各 二 安 


根据 本 章 押 讲 


: 开始 我 的 第 一 个 网 页 


述 的 HITMLS 的 语法 与 结构 ， 完 成 一 
和 一 个 网 页 如 图 1-5 所 示 。 























个 简单 的 网 页 ， 需 要 包含 头 部 的 各 种 


登 我 的 第 一 个 网 页 x 
CG | © 127.0.0.1:8020/1705-HTML5- 笔 记 /01-H5/01-HTML 基 本 标签 -.… 
点 击 这 里 导入 书签 。 开始 


欢迎 来 到 HTML5 的 奇幻 世界 ! 








【案例 代码 】 


【 章 
1. 
2 
3 


， 补 全 下 列 为 网 页 添加 图 标的 代码 。 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="keywords" content=" 杰 瑞 教育 ,HTMLS, 网 页 开发 " /> 
<meta name="description" content=" 这 是 我 开发 的 第 一 个 网 页 ! "人 > 
<title> 我 的 第 一 个 网 页 </title> 
<link rel="icon" href="img/icon.jpg"/> 
</head> 
<body> 
欢迎 来 到 HTML5 的 奇幻 世界 ! 
</body> 
</html> 


节 练 习 】 


写 出 HTMLS 文档 的 基本 结构 。 
写 出 <head> 中 常用 的 标签 : 5 S 























< rel=" e ="img/icon.jpg" /> 


列举 常见 的 字符 集 编码 格式 : 、 











， 列举 <meta> 标 签 的 常用 属性 代码 。 不 少 于 3 句 。 








HTMLS 学 习 概 述 


0D 20 HIML20UUU00OU0U0000D0 


文字 和 图 像 作为 传达 信息 的 两 种 常用 方式 ， 在 网 页 内 容 中 占有 很 大 比例 ， 因 此 网 页 的 设 
计 排 版 就 显得 尤为 重要 ， 合 理 的 排版 可 以 提高 网 页 的 可 读 性 ， 方 便 用 户 找到 所 需 的 信息 。 

本 章 学 习 目标 : 

> 掌握 常见 的 块 级 标签 。 


> 掌 志 



































坚 常 见 的 行 级 标签 。 





> 掌握 行 级 标签 与 块 级 标签 的 区 别 。 





> 了 解 HIMLS 的 新 增 标签 。 
通过 本 章 的 学 习 ， 可 以 大 大 提高 网 页 代码 编写 时 的 规范 性 ， 有 利于 形成 良好 的 HTML5 
书写 以 及 操作 规范 。 




















2.1 常见 的 块 级 标签 


块 级 标签 ， 顾名思义 ， 此 类 标签 在 网 页 中 显示 为 块 。 块 级 标签 一 般 独 占 一 行 ， 新 的 块 级 
标签 将 从 新 的 一 行 开始 排列 ， 它 可 以 容纳 内 联 元 素 和 其 他 块 级 元 素 。 





2.11 4 





























1>4h1l>...Xh6>4h6A4] DDDO 














标题 标签 的 作用 是 设置 段落 标题 的 大 小 ， 共 设置 了 6 级 ， 从 1 级 到 6 级 每 级 标题 的 字体 
大 小 依次 递减 。 
































基本 语法 如 下 : 


<hl> 标 题 文 字 </h1l> 


代码 示例 如 下 : 


<!IDOCTYPE html> 
<html> 


<head> </head> 

<body> 
<hl>hl 标题 标签 </h1> 
<h2>h2 标题 标签 </h2> 
<h3>h3 标题 标签 </h3> 
<h4>h4 标题 标签 </h4> 
<h5>h5 标题 标签 </h5> 
<h6>h6 标题 标签 </h6> 

</body> 


</html> 


第 2 章 HTMIL5 常见 的 块 级 标签 和 行 级 标签 


效果 如 图 2-1 所 示 。 





CE io 127.0.0.1:8020/HelloWorld/ch02.html?_hbt=1503648761244 广 





hl 标题 标签 
h2 标 题 标签 


hs 标题 标签 
h4 标 题 标签 
h5 标 题 标签 





图 2-1 设置 标题 大 小 效果 


2.12 <hr/Aj0000D0O 
水 平 线 标签 的 作用 是 添加 水 平分 隔 线 ， 让 页 面 更 容易 区 分 段落 。 
基本 语法 如 下 : 


<hr/> 





代码 示例 如 下 : 


<IDOCTYPE html> 
<html> 
<head> </head> 
<body> 
<span> 我 在 水 平 线 上 面 </span> 
<hr /> 
<span> 我 在 水 平 线 下 面 </span> 
</body> 
</html> 




















效果 如 图 2-2 所 示 。 





C | © 127.0.0.1:8020/HelloWorld/ch02.html?_hbt=1503648761244 








我 在 水 平 线 上 面 
我 在 水 平 比 下 面 








图 2-2 ”设置 水 平 线 效果 
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213 <p>p 沾 0000 








空 行 的 间隔 。 
基本 语法 如 下 : 


<p> 段 落 文字 </p> 
代码 示例 如 下 : 


<IDOCTYPE html> 
<html> 
<head></head> 
<body> 
<p> 我 是 第 一 段 文字 </p> 
<p> 我 是 第 二 段 文字 </p> 
</body> 
</html> 


效果 如 图 2-3 所 示 。 


D 段落 标 答 


CGO 127.0.0.1:8020/HelloWorld/ch02.html? 


我 是 第 一 段 文字 


我 是 第 二 段 文 字 





2.14 zr/Aj00D0O 














文本 进行 换行 显示 。 

基本 语法 如 下 : 
<br/> 

代码 示例 如 下 : 


<IDOCTYPE html> 
<html> 
<head> </head> 
<body> 
<p> 
我 是 第 一 段 文字 <br /> 
我 是 第 二 段 文字 
</p> 
12 


使 用 段落 标签 可 以 区 分 段落 ， 不 同 的 段落 间 会 自 








动 增加 换行 符 ， 段 落 上 下 方 各 会 有 一 个 





使 用 换行 标签 可 以 控制 段落 中 文字 的 换行 显示 。 一 般 的 浏览 器 会 根据 窗口 的 宽度 自动 将 
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</body> 
</html> 


效果 如 图 2-4 所 示 。 


口 换行 标签 
GC |© 127.0.0.1:8020/HelloWorld/ch02.html?_hbt=150364876124 


我 是 第 一 段 文字 
我 是 第 二 段 文字 











图 2-4 设置 换行 标签 效果 





2.1.5 <blockquote><blockquotezl DUODD 
使 用 引用 标签 来 表示 引用 的 文字 ， 同 时 会 将 标签 内 的 文字 缩 进 显示 。 其 cite 属性 表明 引 
用 的 来 源 ， 一 般 表 明 引 用 网 址 。 

基本 语法 如 下 : 



































<blockquote cite=" http://www.jredu100.com"> 引 用 的 文字 </blockquote> 
代码 示例 如 下 : 


<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
第 一 段 参 考 文 字 
<blockquote> 引 用 的 文字 </blockquote> 
第 二 段 参 考 文 字 
</body> 
</html> 


效果 如 图 2-5 所 示 。 























第 一 段 参考 文字 


引用 的 文字 
第 二 段 参 考 文字 




















图 2-5 添加 引用 标签 的 文字 产生 缩 进 效果 








2.1.6 pre>JIpre] DDO0D0UO0O 
预 格式 标签 可 以 将 文字 按照 原始 的 排列 方式 进行 显示 。 
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基本 语法 如 下 : 
<pre> 需 要 按 原 格式 显示 的 文字 </pre> 





代码 示例 如 下 : 


<!DOCTYPE html> 
<html> 
<head> </head> 
<body> 
<pre> 
村 
米 米 米 
米 米 米 米 米 
米 米 米 米 米 米 米 
米 米 米 米 米 米 米 米 米 
</pre> 
</body> 
</html> 


效果 如 图 2-6 所 示 。 


六 


六 来 

玉 束 来 来 水 
于 来 来 来 冰冰 六 
来 玉 玉 来 来 玉 玉 来 来 








图 2-6 在 预 格式 标签 内 画 出 的 等 边 三 角形 效果 























2.1.7 <>di>Ai>4U 半 DD0UUDO 
无 序列 表 是 将 文字 段落 向 内 缩 进 ， 并 在 每 个 列表 项 前 面 加 上 圆 形 (@ )、 空 心 圆 形 
以 达到 醒目 的 效果 。 由 于 无 序列 表 没 有 顺序 编号 ， 而 是 采用 项 














ey 


( 〇 ) 或 方形 《〈 国 ) 等 符号 ， 
目 符号 的 形式 ， 所 以 又 被 称 为 符号 列表 。 


基本 语法 如 下 : 





<ul type="disc"> 
<li> 第 一 项 </li> 
<li> 第 二 项 </> 
<li> 第 三 项 </li> 





</ul> 
代码 示例 如 下 : 
<!IDOCTYPE html> 
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<html> 


篇 六 - 辫 


第 和 蛙 


<head> </head> 
<body> 


</body> 
</html> 


<ul type="disc"> 
<li> 鼠 标 </i> 
<li> 键 各 </i> 
<]i> 显 示 右 </li> 

</ul> 

<ul type="circle"> 
<li> 鼠 标 </i> 
<li> 键 盘 </1i> 
<]i> 显 示 右 </li> 

</ul> 

<ul type="sgquare"> 
<]i> 和 鼠标 </li> 
<li> 键 各 </1i> 
<li> 显 示 器 </li> 

</ul> 


效果 如 图 2-7 所 示 。 


口 无 序列 表 
GC |© 127.0.0.1:8020/HelloWorld/ 


鼠标 
键盘 


显示 器 


图 2-7 无 序列 表 效 果 


2.18 <ol>di>Ai>4oA 半 DUUDDO 

















编号 来 标记 ， 比 如 1、2、3、…。 
基本 语法 如 下 : 


<ol type="1 "> 
<]i> 第 一 项 </li> 
<li> 第 二 项 </i> 


三 





<li> 第 三 项 < 省 > 


</ol> 


h02.html?_hbt=15 





HTMIL5 常见 的 块 级 标签 和 行 级 标签 


有 序列 表 是 将 文字 以 特定 的 顺序 来 进行 排列 ， 每 个 列表 项 会 向 内 缩 进 ， 并 且 它 们 之 间 以 
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<ol> 标 签 的 属性 见 表 2-1。 


表 2-1 <ol> 标 签 的 属性 

















属 性 属性 值 备注 
type 1、A、ali 设置 编号 样式 ， 默 认 值 type=1 
start 1、2、3 等 整数 值 设置 编号 起 始 值 
reversed reversed 反 向 排序 (IE9 不 支持 ) 







































































编号 样式 的 属性 值 见 表 2-2。 
表 2-2 编号 样式 的 属性 值 
编号 样式 的 属性 值 编号 样式 备 ”-“ 注 
1 也 2 交 。 阿拉 伯 数 字 
A A, B, C, 大 写 英文 字母 
外 a, bc … 小 写 英 文字 母 
I I IH, I, 大 写 罗马 数字 
i i， 藻 ， 道 ，… 小 写 罗马 数字 
代码 示例 如 下 : 
<!IDOCTYPE html> 
<html> 
<head> </head> 
<body> 
<h4> 阿 拉 伯 数字 列表 </h4> 
<ol type="1"> 
<1i> 鼠 标 </li> 
<li> 键 往 < 汪 > 
<li> 显 示 器 </li> 
</ol> 
<h4> 大 写字 母 列 表 </h4> 
<ol type="A'"> 
<l> 鼠 标 </1i> 
<li> 键 各 </1i> 
<li> 显 示 器 </li> 
</ol> 
<h4> 大 写 罗马 数字 列表 </h4> 
<ol type=' 工 > 
<li> 鼠 标 </1i> 
<li> 键 各 </1i> 
<li> 显 示 器 </li> 
</ol> 
</body> 
</html> 


效果 如 图 2-8 所 示 。 
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CO 127.0.0.1:8020/HelloWorld/ch02.html?_hbt=1503707826281 


阿拉 伯 数 字 列表 


C. 显示 器 


大 写 罗 马 数字 列表 


L 鼠标 
I 键盘 
了 L. 显示 器 








图 2-8 有 序列 表 效 果 











2.1.9 <dl><dl>:UOOO0OD0OD 

定义 列表 适用 于 对 名 词 、 概 念 或 主题 的 定义 ， 第 一 部 分 是 名 词 、 概 念 或 主题 ， 并 且 通 常 
只 有 一 项 ， 第 二 部 分 是 相应 的 解释 和 描述 ， 可 以 有 多 项 。 

基本 语法 如 下 : 


<dl> 











<dt> 这 是 定义 列表 的 标题 </dt> 
<dd> 描 述 项 第 一 项 </dd> 
<dd> 描 述 项 第 二 项 </dd> 
<dd> 描 述 项 第 三 项 </dd> 
</dl> 


代码 示例 如 下 : 


<IDOCTYPE html> 
<html> 
<head> </head> 
<body> 
<dl> 
<dt> 咖 啡 </dt> 
<dd> 一 种 黑色 的 热饮 料 ， 原 料 是 咖啡 豆 ， 非 洲 盛 产 这 类 原料 。</dd> 
<dd> 可 以 提神 ， 刺 激 神经 。</dd> 
</dl> 
<dl> 








<dt> 茶 </dt> 
<dd> 是 中 国 特 有 的 一 种 著名 饮品 ， 畅 销 海内 外 。</dd> 
<dd> 茶 叶 可 作 饮 品 ， 含 有 多 种 有 益 成 分 ， 并 有 保健 功效 。</dd> 
</dl> 
</body> 

















17 


Web 前 端 学 习 笔 记 : HTML5+CSS3+JavaScript 
</html> 
代码 运行 效果 如 图 2-9 所 示 。 


六 定义 列 要 


C@C | @ 127.0.0.1:8020/HelloWorld/ch02.htm 


一 种 黑色 的 热饮 料 ， 原 料 是 咽 啡 豆 ， 非 洲 侯 产 这 类 原料 ， 


可 以 提神 ， 判 激 神 经 。 


是 中 国 特有 的 一 种 著名 饮品 ， 畅 销 海内 外 。 
茶叶 可 作 饮 品 ， 含 有 多 种 有 益 成 分 ， 并 有 保健 功效 。 








图 2-9 定义 列表 效果 


2.110 <div><div> OOUOOD 


<div> 标 签 可 定义 文档 中 的 分 区 或 节 ， 将 文档 分 割 为 独立 的 、 不 同 的 部 分 。 它 是 可 用 于 
组 合 其 他 HIMLS 标签 的 容器 。 除 此 之 外 ， 由 于 它 属于 块 级 标签 ， 浏 览 器 会 在 其 前 后 换 
行 显示 。 

<div> 标 签 的 一 个 常见 的 用 途 是 文档 布局 。 它 可 以 取代 使 用 表格 定义 布局 的 老式 方法 。 
如 果 与 CSS 一 同 使 用 ，<div> 标 签 可 用 于 对 大 的 内 容 块 设置 样式 属性 。 

基本 语法 如 下 : 


<div> 这 是 一 个 div</div> 
代码 示例 如 下 : 


<!IDOCTYPE html> 
<html> 

<head></head> 

<body> 

<div style="width: 100px; height: 100px; background-color: red;"> 

这 是 一 个 div</div> 
</body> 
</html> 


代码 运行 效果 如 图 2-10 所 示 ， 其 中 涉及 的 CSS 相关 知识 将 在 后 续 章 节 详 细 讲解 。 





















































GC |© 127.0.0.1:8020/HelloWorld/ch02.html?_hbt=1503707826281 立 











图 2-10 分 区 标签 效果 
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2.2 


常见 的 行 级 标签 


与 块 级 标签 不 
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同 ， 行 级 标签 在 页 面 中 可 以 和 其 他 元 素 在 同行 显示 ， 直 到 一 行 不 能 放下 一 


个 完整 的 元 素 ， 并 且 通 常 行 级 元 素 内 不 会 包含 其 他 元 素 。 在 HIML5 中 行 级 标签 有 很 多 ， 下 





面 主 


HE 
女 





介 引 














2.21 <dmgA]00DDO 


网 页 的 展现 力 ， 吸 引用 户 | 
响 网 页 的 加 载 速度 ， 过 小 内 容 模糊 不 清 就 失去 了 图 片 存在 上 





网 页 中 除了 文本 ， 还 有 一 种 重要 的 传递 信息 的 方式 就 是 图 
6 注意 。 一 般 网 页 设计 








GIF、JPG 和 PNG 等 。 
基本 语法 如 下 : 





图 片 标签 、 超 链接 标签 和 一 些 常用 的 行 级 标签 。 

















选择 的 图 片 大 小 不 会 太 大 ， 














片 ， 适 当地 插入 图 片 可 以 增加 
图 片 过 大 会 影 














<img src="img/logo.png" alt=" 杰 瑞 教 育 logo" title=" 杰 瑞 教 育 " /> 





区 | 











1. src 属性 





STC 


路 径 、 网 络 地 址 。 


式 严禁 使 用 ， 原 


现 跨 域 问 题 ， 


1) 相对 路 径 : 以 当前 文件 为 准 ， 





盟 性 表示 引 月 


片 标签 主要 有 如 下 5 个 属性 。 














日 图片 的 路 径 地 址 。 路 径 地 址 的 写法 j 








去 寻找 图 





片 地 址 。 














Q 与 当前 文件 处 于 同一 层 的 图 片 
@ 图 片 在 当前 文件 下 一 层 : 文件 
@) 图 片 在 当前 文件 上 一 层 : ../ 图 
包含 图 片 的 项 目 结构 如 图 2-11 所 








， 直 接 写 











不 。 








2) 绝对 路 径 : file:/// 盘 符 :/ 文 件 来/ 图片 .扩展 名 。 但 这 种 方 











人 绝对 路 径 只 在 当前 计算 机 生效 


@ 通过 绝对 路 径 打 开辟 
造成 图 片 无 法 显示 。 代 码 示例 如 下 : 











Ee 


片 使 用 的 




















， 若 将 网 站 转移 

















> 园 Helloworld 


图 





[my css 


vY 区 img 


的 意义 。 网 页 中 常用 的 图 片 格式 为 


共有 三 种 ， 分 别 为 相对 路 径 、 绝 对 


珊 | logo.png 


[mr js 





2-11 包含 图 


[3] index.html 





服务 器 ， 则 路 径 会 失效 。 





片 的 项 目 结构 


是 file 协议 ， 但 网 页 中 使 用 的 是 http 协议 ， 因 此 会 出 





<img alt=" 杰 瑞 教 育 的 logo" src="file:///C:/Users/jerehedu/Pictures/logo.png" /> 


当 上 述 代 码 以 http 协议 方式 打 玫 








杰 瑞 教育 的 logo 


图 2-12 











号 
加 


通过 http 协议 打 





F 时 ， 图 片 无 法 显示 ， 如 图 2-12 所 示 。 











当 网 页 直接 通过 本 地 浏览 器 以 file 协议 打开 时 ， 图 片 可 以 了 








， 如 图 2-13 所 示 。 
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GC © file/WCYVUsersjerehedu/Documents/HBuilderproject/HellowW.… 衣 : 





上 恋 瑞 教育 


图 2-13 通过 file 协议 打开 的 网 页 


3) 网 络 地 址 :使 用 网 络 上 的 图 片 链 接 。 但 是 ， 一 般 不 使 用 网 络 地 址 ， 原 因 是 网 络 图 片 
可 能 由 于 各 种 原因 被 删除 、 转 移 位 置 ， 使 图 片 无 法 打开 。 

2.，height 和 width 属性 

height 和 width 属性 分 别 表示 图 片 的 宽度 和 高 度 ， 推 荐 用 CSS(style="width: 100px; height: 
100px;") 代 替 。 

3. title 属性 

该 属性 用 于 设置 图 片 的 标题 ， 即 当 和 鼠标 指 在 图 片上 后 显示 的 文字 ， 如 图 2-14 所 示 。 




















Cc 1O 127.0.0.1:8020/HelloWorld/ch02.html?_hbt=1503883795931 会 | : 








恋 瑞 教育 














图 2-14 title 属性 设置 后 效果 





4. alt 属性 
该 属性 可 设置 由 于 图 片 无 法 加 载 时 显示 的 文字 ， 如 图 2-15 所 示 。 











Cc IO 127.0.0.1:8020/HelloWorld/ch02.html?_hbt=1503883795931 会 | :; 





杰 瑞 教育 logo 





图 2-15 alt 属性 设置 后 效果 





S. align 属性 
该 属性 可 设置 图 片 周围 文字 相对 于 图 片 的 位 置 。 常 用 属性 值 有 top、center、bottom， 用 
处 不 大 ， 推 荐 用 CSS 来 控制 样式 ， 此 处 不 再 歼 述 。 


2.22 <a>AaA]0D0DDO 
通常 ， 一 个 网 站 是 由 多 个 页 面 组 成 的 ， 而 不 同 页 面 的 跳 转 就 需要 使 用 链接 。<a> 标 签 可 


以 设置 一 个 超 链接 ， 单 击 超 链接 可 以 跳 转 到 新 的 文档 或 者 当前 文档 中 的 某 个 部 分 。 
基本 语法 如 下 : 


<a href="#"> 这 是 一 个 超 链接 </a> 











20 


地 文件 。 当 月 





1， 超 链接 标签 的 属性 


(1) href 属 
在 <a> 标 签 上 






































使 


(2) target 属性 








使 用 target 属 怕 
_self 〈 在 与 链接 相同 的 框架 ， 
性 值 为 _self， 其 他 属性 值 可 以 





可 以 定义 





href 属性 








来 


























时 ， 表 示 这 是 一 个 空 




















通过 超 链接 ] 
打开 被 链接 文档 ) 和 _blank 
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HTML5 常见 的 块 级 标签 和 行 级 标签 





述 链 接 的 地 址 ， 这 个 地 址 可 以 是 网 络 链接 ， 也 可 以 是 本 
的 超 链 接 。 








站 

















2， 锚 链接 的 用 法 
(1) 本 页 面 锚 链 接 


Q 设置 锚 点 : <a name="top"></a>。 


@) 在 超 链接 




















通过 查阅 帮助 文档 了 解 。 


<a href="#top" target="_self"> 这 是 一 个 超 链接 </a> 
(2) 页 面 间 错 链接 


Q 在 即将 跳 转 页 面 的 指定 位 置 
@ 在 超 链 接 的 href 属性 中 ， 


<ahre 仁 "thtml#weixin"> 跳 转 








置 销 点 。 




















223 UUU0000000 


在 






































市 
入 /站 








页 四 





























党 
加 | 


指定 











号 




















部 分 </a> 


的 文档 在 何 处 显示 。 和 常用 的 两 个 





届 性 值 分 别 为 











(在 新 窗口 中 打开 链接 )， 上 默认 属 











EF， 使 用 #name 跳 转 到 对 应 锚 点 。 基 本 语法 如 下 ; 





地 址 .htmjl#name"。 基 本 语法 如 下 ; 





介绍 了 比较 重要 的 图 片 标 签 和 超 链接 标签 后 ， 还 有 

















些 其 他 常见 的 行 级 标签 需要 介 


















































































































































































































































绍 ， 如 <span>、<em> 、<strong>、<i>、<b> 等 。 
其 中 ，<span> 标 签 常 常 被 用 来 组 合 文 档 中 的 行内 元 素 ， 无 实际 意义 ， 用 于 包 里 某 部 分 文 
字 ， 修 改 特定 样式 。 
基本 语法 如 下 : 
<span> 这 是 由 span 包括 的 文字 </span> 
由 于 篇 幅 限 制 ， 还 有 一 些 常 见 的 行 级 标签 不 做 具体 介绍 ， 仪 简单 列 出 其 作用 ， 见 表 2-3。 
表 2-3 其 他 常见 的 行 级 标签 
标 签 说 明 
<em> 侧重 点 的 强调 ， 可 嵌 套 使 用 ， 嵌 套 个 数 越 多 ， 强 调 级 别 越 高 
<strong> 表示 内 容 的 重要 性 ， 舱 套 递增 重 要 性 级 别 
<small> 旁 注 (side comments) ， 可 以 用 在 免责 声明 ， 使 用 条 款 和 版 权 信息 等 需要 小 字体 的 场景 
<s> 有 误 文 本 ， 文 本 文字 上 加 删除 线 的 样式 
Se 不 仅仅 是 粗 体 文本 ， 还 可 以 定义 一 些 需 要 引起 注意 却 没有 额外 语义 的 内 容 ， 比 如 摘要 的 关键 和 文章 导语 
的 加 粗 等 
<i> 不 仅 是 单纯 的 斜体 ， 还 可 表示 “ 另 一 种 叙述 方式 ”， 和 常见 的 场景 有 外 来 语 、 分 类 名 称 和 技术 术语 等 
<cite> 浏览 器 显示 为 倾斜 ， 常 用 于 书 、 画 作 、 作 品 的 引 
<q> 短 引用 ， 显 示 为 文字 用 "引起 来 
<code> 只 是 表示 计算 机 代码 ， 但 是 浏览 器 只 会 显示 等 宽 字 体 ， 不 会 保留 代码 格式 ， 需 配合 <pre> 标 签 使 
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2 


有 不 


注意 : 块 级 标签 与 行 级 标签 的 特点 与 区 别 。 

> 块 级 标签 自动 换行 ， 前 后 隔 一 行 ; 行 级 标签 不 会 自动 换行 ， 从 左 往 右 依次 显示 。 
> 块 级 标签 的 宽度 默认 是 100%; 行 级 标签 的 宽度 由 文字 内 容 撑 开 。 

> 块 级 标签 可 以 设置 宽度 、 高 度 、 边 距 等 属性 ; 行 级 标签 不 能 设置 上 述 属 性 。 
HTML5 新 增 标签 简介 


Ar 
< 1B) J 


这 


在 此 主要 介绍 HTML5 新 增 结构 标签 。 使 用 结构 标签 可 以 提升 网 页 文档 的 可 读 性 ， 并 且 
| 于 搜索 引擎 优化 。HTMLS 新 增 的 结构 标签 主要 包括 以 下 7 个 : <section>、<article>、 



























































<header>、<hgroup>、<footer>、<nav>、<aside>。HTML5 结构 标签 布局 示意 图 如 图 2-16 
所 示 。 








asSl ， 
一 


[ ww | 


article 
section 


[| mw | 








图 2-16 HTMLS5 结构 标签 布局 示意 图 
7 个 结构 标签 的 具体 含义 见 表 2-4。 





























表 2-4 _ HTMLS 新 增 的 结构 标签 及 其 作用 


























































































































标 签 作 
<section> 表示 页 面 中 的 一 个 内 容 区 块 、 文 档 的 主体 部 分 ， 用 于 将 网 页 或 文章 划分 章节 、 区 块 
<article> 表示 页 面 中 的 一 块 与 上 下 文 不 相关 的 独立 内 容 ， 如 博客 中 的 一 篇 文章 
<aside> 表示 article 元 素 内 容 之 外 的 ， 与 article 元 素 内 容 相关 的 辅助 信息 
<header> 网 页 或 文章 的 头 部 
<footer> 网 页 或 文章 的 底部 
<nav> 表示 页 面 中 导航 链接 的 部 分 
<hgroup> 将 整个 页 面 或 页 面 中 一 个 内 容 区 块 的 标题 进行 组 合 


细 讲 
22 





HTMLS 新 增 的 标签 还 有 很 多 ， 如 <canvas>、<video>、<audio> 等 ， 这 些 将 在 后 续 章 节 衣 
解 ， 对 其 他 标签 感 兴趣 的 同学 可 以 参考 帮助 文档 进行 了 解 。 


人 




















第 2 章 HTML5 常见 的 块 级 标签 和 行 级 标签 


2.4 章节 案例 :; 促销 信息 网 页 实现 


结合 上 文中 己 经 学 习 的 块 级 标签 和 行 级 标签 ， 使 用 合适 的 标签 配合 适当 的 CSS 设计 一 
个 网 页 ， 如 图 2-17 所 示 。 








口 127.0.0.1:8020/1705-H x 了 \ 
C |© 127.0.0.1:8020/1705-H... 人 


点 击 这 里 导入 书签 。 开始 


促销 信息 


笔记 本 拍卖 
四 核 ， 4G 内 存 ，256G 硬 盘 


跳楼 商 抢 价 元 起 


这 人 台 笔记 本 电脑 不 错 , 快速 抢购 中 ， 








图 2-17 案例 示意 图 
【案例 代码 】 


<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
<h1> 促 销 信 息 </h1> 
<dl> 
<dt> 
<img src="iImg/computer.jpg" width="260px" height="200px" title="computer" /> 
</dt> 
<dd> 笔 记 本 拍卖 </dd> 
<dd> 四 核 ，4G 内 存 ，256G 硬盘 </dd> 
<dd> 跳 楼 疯 抢 价 <span style="font-size: 36px; color: red;">1</span> 元 起 </dd> 
</dl> 
这 人 台 笔 记 本 电脑 <span style="color: red;"> 不 错 </span>， 快 速 <span style="font-size: 30px; 
color: green;"> 抢 购 </span> 吧 ! 
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</body> 
</html> 


【章节 练习 】 

1. 常用 的 列表 分 为 ys Ss 三 种 。 

2， 写 出 5 个 常见 的 块 级 标签 : 3 s 8 5 
3. 列 出 simg> 标 签 的 常用 属性 及 作用 。 
4. 列 出 超 链 接 标签 的 常用 属性 及 作用 。 
5 
6 
7 
8 . 







































































， 如 何 设置 一 个 跳 转 到 其 他 页 面 的 指定 锚 链 接 ? 
， 如何 单 击 超 链 接 发 送 邮件 ? 
， 写 出 <em>、<strong>、<i>、<b> 的 区 别 。 
HTML5 新 增 的 结构 标签 包括 <header> 、 5 、 、<footer> 、 
、<hgroup>。 






























































24 


DD 30 HITIML20D 





表格 是 HIMLS 中 的 重要 布局 之 一 ， 使 用 








灵活 方便 ， 相 对 于 其 他 的 块 级 标签 ， 表 格 在 布 


局 上 拥有 更 加 强大 能 力 ， 可 以 快速 地 搭建 出 网 页 中 的 结构 形式 。 





本 章 学 习 目 标 : 
> 了 解 表 格 的 基本 结构 。 
> 掌握 表格 的 基本 属性 。 








> 掌握 表格 的 行 、 列 的 基本 属性 。 

> 了 解 表格 的 结构 化 和 直列 化 。 

表格 包含 的 包容 十 分 广泛 ， 几 乎 可 以 包含 所 有 的 HIMLS 标签 ， 可 以 极 大 地 增加 表格 在 
布局 方面 的 能 力 。 通 过 这 一 章 的 学 习 ， 读 者 可 以 使 用 表格 快速 搭建 网 页 结构 。 














3.1 有 IMLs5s 表格 简介 








3-1、 图 3-2 所 示 。 








表格 在 网 页 布局 中 非常 常用 ， 可 以 让 网 页 以 行 、 列 的 方式 承载 数据 ， 表 格 布局 实现 如 


主题 : 3232 


Android 技 术 交 流 1 120 ) 
i 


贴 数 : 12356 
Qn230ID) 。 最 后 发 表 ; 2 分 钟 前 


IOS 技 术 交 流 | 120 HTML5 技 术 交 流 1 120 ) 
C 主题 ; 3232 主题 : 3232 
IUD> 9 贴 数 : 12356 E59 巾 数 : 12356 
最 后 发 表 ; 2 分 钟 前 报 后 发 表 : 2 分 钟 前 


PHP 技 术 交流 ( 120 ) 职业 素养 交流 ( 120 ) 


主题 : 3232 
贴 数 ; 12356 
最 后 发 表 : 2 分 钟 前 最 后 发 表 : 2 分 钟 前 


« JAVA 技 术 交 流 ( 120 ) 
< 2 主题 : 3232 
== 贴 款 ; 12356 

Java | sna:220m 





ED 主题 : 3232 
贴 数 ; 12356 














图 3-1 表格 常用 布局 示例 (一) 
就 业 先锋 
加 a 访谈 : 陈 凯 

} 多 就 职 : 双 丰 科技 

,i 月 薪 : 15000 元 /月 
回 成 安 伟 单位 : 兑 吧 科 技 薪水 : 14000 元 /月 
图 宋 小 均 单位 : 必 途 信息 薪水 : 14000 元 /月 
四 赵 由 捷 单位 : 凯 夏 国际 薪水 : 12000 元 /月 
加 赖 永 权 单位 :同花顺 。 薪水 : 11505 元 /月 
图 3-2 表格 常用 布局 示例 (二 ) 
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311 U0O0000D0 









































图 3-3 所 示 。 





表格 的 基本 结构 由 行列 组 成 ， 单 元 格 是 表格 的 最 基本 单位 。 表 格 的 基本 结构 示意 


区 








如 














312 0U000D0 



































表格 由 <table> 标签 定义 。 每 个 表格 均 有 若干 行 ， 行 由 <tr> 标签 定义 ， 每 行 被 分 割 为 


若干 单元 格 ， 列 由 <td> 标签 定义 。 字 母 td 指 表格 数据 (table data) ， 即 数据 单元 格 的 内 








容 。 如 果 表 格 的 第 一 行为 表 头 ， 那 么 <td> 标 签 需要 月 
文本 、 图 片 、 列 表 、 段 落 、 表 单 、 水 平 线 、 表 格 等 。 
基本 语法 如 下 : 

<!IDOCTYPE html> 





























<html> 
<head> 
<meta charset="utf-8" /> 
<title> 表 格 的 基本 结构 </title> 
</head> 
<body> 
<table> 
<tr> 
<th> 表 头 1</th> 
<th> 表 头 2</th> 
<th> 表 头 3</th> 
</tr> 
<tr> 
<td> 第 一 行 1</td> 
<td> 第 一 行 2</td> 
<td> 第 一 行 3</td> 
</tr> 
<tr> 
<td> 第 二 行 1</td> 
<td> 第 二 行 2</td> 
<td> 第 二 行 3</td> 
</tr> 
</table> 
</body> 
</html> 
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上 <th> 标 签 替 换 掉 。 数 据 单元 格 可 以 








表格 的 显示 效果 如 图 3-4 所 示 


o 


第 3 章 HTMLS 表格 





C |O 127.0.0.1:8020/Ch03/table.html?_hbt=1503712642432 Q 疤 | : 








表 头 1 表 头 2 表 头 3 
第 一 行 1 第 一 行 2 第 一 行 3 
第 二 行 1 第 二 行 2 第 二 行 3 





3.2 表格 的 基本 属性 


图 3-4 





表格 的 显示 效果 


表格 的 属性 可 以 分 为 两 大 类 ， 分 别 为 作用 于 <table> 标 签 的 和 作用 于 行 <r>、 列 <td> 的 属 
性 。 下 面 介绍 作用 于 <table> 标 签 的 各 种 属性 。 


3.2.1 borde: 000000 





border 属性 定义 表格 边框 ， 属 性 值 可 以 接收 整数 类 型 的 数字 ， 表 示 设 置 表 格 的 宽度 。 


基本 语法 如 下 : 
<table border="1"> </table> 


显示 效果 如 图 3-5 所 示 。 





© 127.0.0.1:8020/Ch03/table.html?_hbt=1503715382010 QQ@ 廊 | : 














表 头 2 


表 头 3 





J 了 1 第 一 行 2 


第 一 行 3 























于 1 第 二 行 2 








第 二 行 3 














图 3-5 表格 的 边框 示例 显示 效果 











注意 : 如 果 border 的 值 增 大 ， 则 只 有 表格 最 外 围 框 线 增加 ， 每 个 单元 格 上 的 边框 并 不 会 
变化 。 表 格 的 border=5 时 的 显示 效果 如 图 3-6 所 示 。 





© 127.0.0.1:8020/Ch03/table.html?_hbt=1503715382010 和食 | ; 














了 1| 第 一 行 2 











第 二 行 2 




















内 border=5 时 的 显示 效果 
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3.2.2 width/heght: DODDOOD 石 DO0D0OD 
width 属性 和 height 属性 分 别 定 义 表格 宽度 和 高 度 。 
基本 语法 如 下 : 


<table border="1" width="400" height="200"> </table> 








图 3-7 所 示 为 宽 400px、 高 200px 的 表格 。 








表 头 2 


















































图 3-7 宽 400px、 高 200px 的 表格 


3.2.3 bgcolor DODDDODOD 


bgcolor 属性 定义 表格 的 背景 色 ， 传 入 一 个 颜色 值 ， 即 可 修改 表格 的 背景 色 。 
基本 语法 如 下 : 























<table border="1" bgcolor="red"> </table> 


执行 代码 ， 表 格 的 背景 色 为 红色 ， 显 示 效 果 如 图 3-8 所 示 。 





口 夫 格 的 基本 结构 
CC |© 127.0.0.1:8020/Ch03/table.html?_hbt=1503715382010 Sh*s 








图 3-8 表格 的 背景 色 为 红色 的 显示 效果 

















3.2.4 background: UDDDOODODO 


background 属性 定义 表格 的 背景 图 ， 需 要 传 入 一 张 图 片 的 路 径 地 址 。 当 background 背景 
属性 与 bgcolor 背景 色 属 性 同时 存在 时 ， 背 景 图 会 覆盖 掉 背 景色 。 
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基本 语法 如 下 : 
<table border="1" background="img/img.png"> </table> 


执行 代码 ， 表 格 的 背景 为 图 片 ， 显 示 效 果 如 图 3-9 所 示 。 





Cc |O 127.0.0.1:8020/Ch03/table.html?_hbt=1503715382010 QQ@ 女 | : 





























图 3-9 带 背 景 图 的 表格 显示 效果 








3.2.5 bordercolor: DO0ODDODODODOD 


bordercolor 属性 定义 表格 的 边框 颜色 ， 接 收藏 色 值 ， 修 改 边框 颜色 。 
基本 语法 如 下 : 


<table border="1" bordercolor="blue"> </table> 


执行 代码 ， 表 格 的 边框 为 蓝 色 ， 显 示 效 果 如 图 3-10 所 示 。 








Cc © 127.0.0.1:8020/Ch03/table.html?_hbt=1503715382010 @ 广 











图 3-10 边框 为 蓝 色 的 表格 显示 效果 





3.2.6 celspaadng 0DDODODOODOODODODOD 


cellspacing 属性 定义 表格 单元 格 与 单元 格 之 间 的 间距 。 从 上 述 各 种 示例 图 可 知 ， 表 格 
单元 格 与 单元 格 之 间 默 认 存在 一 定 的 间距 。 使 用 cellspacing 属性 可 以 手动 调整 这 个 间距 的 
大 小 。 当 cellspacing 设 为 0 时 ， 单 元 格 之 间 没 有 间距 。 

基本 语法 如 下 : 








<table border="1" cellspacing="10"> </table> 
单元 格 之 间 间 距 为 默认 、0px、10px 的 情况 如 图 3-11 所 示 。 
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QQ 六 














| 表 头 2 | 表 头 3 
于 1 第 一 行 2| 第 一 行 3 
他 二 行 2| 第 二 行 3 










































































图 3-11 单元 格 之 间 间 距 为 默认 、0px、10px 的 情况 





注意 : 使 用 “cellspace="0"” 设 置 单元 格 之 间 没 有 间距 ， 并 不 能 合并 相 邻 边框 。 因 而 ， 
图 3-11 中 的 第 二 个 表格 的 边框 是 两 条 线 的 宽度 。 
如 果 需 要 合并 表格 边框 ， 则 可 以 使 用 CSS， 基 本 语法 如 下 : 





<table border="1" style="border-collapse: collapse;" > </table> 


关于 CSS 部 分 将 在 后 续 讲 解 ， 大 家 可 以 先 简单 了 解 一 下 。 使 用 这 行 CSS 语法 使 边框 合 
并 后 ，cellspacing 属性 将 会 失效 ， 效 果 如 图 3-12 所 示 。 





C 1O 127.0.0.1:8020/Ch03/table.html?_hbt=1503715382010 QQ 人文 





表 头 3 
第 一 行 1 第 的 行 3 
了 2 第 二 行 3 























图 3-12 边框 合并 之 后 的 表格 效果 边框 宽度 为 条 线 的 宽度 ) 





3.2.7 cdlpadding: DOO00000000 
cellpadding 属性 定义 单元 格 的 内 边 距 ， 即 单元 格 中 的 文字 与 单元 格 边 框 之 间 的 距离 。 
基本 语法 如 下 : 


<table border="1" cellpadding="10"> </table> 





显示 效果 如 图 3-13 所 示 。 
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@ 女 | : 











表 头 2 








第 一 行 2 














第 二 行 2 


























表 头 2 











第 一 行 2 

















第 二 行 2 




















图 3-13 


3.2.8 align0DODODOD 





cellpadding 默认 和 cellpadding="10" 的 显示 效果 


align 属性 用 于 调整 表格 在 其 父 容器 中 的 位 置 ， 可 选 值 有 left、center、right， 分 别 表示 表 





格 居 左 、 居 中 、 居 右 。 
基本 语法 如 下 : 


<table border="1" align="center"> </table> 


显示 效果 如 图 3-14 所 示 。 





© 127.0.0.1:8020/Ch03/table.html?_hbt=1503715382010 











表 头 2 


表 头 3 








第 一 行 2 


第 一 行 3 

















第 二 行 2 


第 二 行 3 


























表 头 2 


| 表 头 3 








第 一 行 2 


税 一 行 3 




















第 二 行 2 











简 = 行 3 














表 头 2 
第 一 行 2 
第 二 行 2 


















































图 3-14 表格 在 浏览 器 中 居 左 、 





居中 、 居 右 的 显示 效果 


注意 : 表格 的 align 属性 现在 不 再 建议 使 用 。 它 的 相关 功能 已 经 被 CSS 中 的 浮动 (float) 


所 取代 ， 大 家 了 解 即 可 。 


3.3 ， 行 和 列 的 属性 


了 解 了 用 于 表格 的 各 种 属性 ， 接 下 来 继续 学 习作 用 于 行 <t>、 列 <td> 的 属性 。 
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3.3.1 width/heght] DODOODOD 人 D0D0O0O 








width/height 属性 主要 用 于 调整 表格 中 单元 格 的 宽 和 高 。 








基本 语法 如 下 : 


<table border="1"> 
<tr> 


<td width="100" height="50"> 第 一 行 1 </td> 
<td> 第 一 行 2</td> 
<td> 第 一 行 3</td> 





</tr> 
</table> 


执行 代码 ， 修 改 第 一 个 单元 格 的 宽度 、 





旧 素 相 行列 的 基本 屋 性 .htn x We 和 \ 
CG | © 127.0.0.1:8020/code/ 第 一 篇 /第 三 章 /3.3/ 表 格 行列 ..…. 


点 击 这 里 导入 书签 。 


开始 








| 第 一 行 1 





第 一 行 2 





























高 度 为 100px、50px， 显 示 效 果 如 


x 








图 3-15 ”修改 第 一 个 单元 格 的 宽度 和 高 度 的 显示 效果 


注意 : 当 表 格 属性 与 行列 属性 冲突 时 ， 以 行列 属性 为 准 。 


332 bgcoor D00000000 


bgcolor 属性 主要 是 修改 单元 格 的 





基本 语法 如 下 : 


<table border="1"> 
<tr> 


了 EL 
月 愉 记 。 


<td bgcolor="#0000FF"> 第 一 行 1</td> 
<td> 第 一 行 2</td> 
<td> 第 一 行 3</td> 





</tr> 
</table> 


执行 代码 ， 修 改 第 一 个 单元 格 的 








背景 色 为 蓝 色 ， 


辐 


亚 不 


GO 127.0.0.1:8020/HelloWorld/Ch03/table_bgcolor.html?_hbt=1 











国语 一 行 ?| 














第 一 行 3 











图 3-16 
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l= 





修改 入 


6 一 个 单元 格 的 





月 味 


色 的 显示 效果 








x 








图 3-15 所 示 。 


效果 如 图 3-16 所 示 。 
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333 aigy0000000U00U00 
align 属性 控制 单元 格 中 内 容 的 水 平 位 置 。 基 本 语法 如 下 : 


<table border="1" width="300" height="50"> 
<tr> 
<td align="left"> 第 一 行 1</td> 
<td align="center"> 第 二 行 2</td> 
<td align="right"> 第 三 行 3</td> 
</tr> 
</table> 


执行 代码 ， 三 个 单元 格 中 的 文字 分 别 为 相对 于 单元 格 水 平方 向 居 左 、 居 中 、 居 右 。 显 示 
效果 如 图 3-17 所 示 。 



































六 卖 格 行列 的 基本 尾 性 ,htn Xx 
GG |@ 127.0.0.1:8020/code/ 第 一 篇 /第 三 章 /3.3/ 表 格 行列 ... 
点 击 这 里 导入 书签 。 





从 - 第 二 行 2 

















图 3-17 三 个 单元 格 中 文字 的 align 属性 的 显示 效果 








注意 : 

表格 的 align 属性 是 控制 表格 自身 在 浏览 器 中 的 显示 位 置 ， 而 行列 的 align 属性 是 控制 单 
元 格 中 文字 在 单元 格 中 的 对 齐 方式 。 

表格 的 align 属性 并 不 影响 表格 内 文字 的 水 平方 式 ，<tr> 标 签 的 align 属性 可 以 控制 一 
中 所 有 单元 格 的 水 平 对 其 方式 。 


334 valimyD00000000000 
valign 属性 控制 单元 格 中 内 容 的 垂直 位 置 。 基 本 语法 如 下 ; 


<table border="1" width="200" height="100"> 
<tr> 
<td valign="top"> 第 一 行 1</td> 
<td valign="center"> 第 一 行 2</td> 
<td valign="bottom"> 第 一 行 3</td> 
</tr> 


</table> 


执行 代码 ， 三 个 单元 格 中 的 文字 分 别 为 相对 于 单元 格 垂直 方向 居 上 、 居 中 、 居 下 。 显 示 
效果 如 图 3-18 所 示 。 
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第 一 行 2 
第 一 行 3 




















图 3-18 三 个 单元 格 中 文字 的 valign 属性 的 显示 效果 





注意 : 当 表 格 属性 与 行列 属性 冲突 时 ， 以 行列 属性 为 准 ( 近 者 优先 ) 。 


3.3.5 colspan/rowspanUDDODOODODODOODOD 


在 实际 见 到 的 表格 中 ， 很 多 都 是 组 合 类 表格 。 例 如 图 3-19 所 示 的 表格 ， 单 元 格 “ 学 生 
成 绩 ” 属 于 跨 三 列 ， 单 元 格 “ 张 三 ”、 单 元 格 “ 李 四 ” 属 于 跨 两 行 。 为 了 实现 这 类 的 表格 需 
求 ， 就 需要 掌握 表格 单元 格 合并 属性 ， 通 常 也 叫 跨 行 或 者 跨 列 合 并 属性 。 


六 万 局 的 哮 行 与 跨 列 x 1 

















图 3-19 ”跨行 跨 列 的 表格 





注意 : 
colspan 属性 表示 跨 列 ， 当 某 个 格 跨 N 列 时 ， 其 右边 N-1 个 单元 格 需 删 除 。 
rowspan 属性 表示 跨行 ， 当 某 个 格 跨 N 行 时 ， 其 下 方 N-1 个 单元 格 需 删 除 。 


3-19 的 实现 代码 如 下 : 


<table border="1"> 
<tr> 
<td colspan="3"> 学 生成 绩 </td> 
</tr> 
<tr> 
<td rowspan="2"> 张 三 </td> 
<td> 语 文 </td> 
<td>98</td> 
</tr> 
<tr> 
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<td> 数 学 </td> 
<td>95</td> 
</tr> 
<tr> 
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<td rowspan="2"> 李 四 </td> 


<td> 语 文 </td> 
<td>88</td> 
</tr> 
<tr> 
<td> 数 学 </td> 
<td>91</td> 
</tr> 
</table> 


34 表格 的 结构 化 与 直列 化 

















为 了 更 好 地 管理 及 格式 化 表格 
341 00000D0 
































， 更 好 地 语义 化 标签 ， 需 要 掌握 


| 

















格 的 结构 化 与 直列 化 。 




















表格 的 结构 化 就 是 将 表格 分 为 表 头 、 表 体 、 表 尾 三 部 分 ， 这 样 在 修改 其 中 一 部 分 时 不 会 





影响 到 其 他 部 分 ， 方 便 对 表格 进行 操作 。 














一 个 完整 的 表格 通常 包括 以 下 


四 部 分 : 








1) caption: 表格 的 标题 ， 通 常 出 现在 表格 的 顶部 。 
2) thead: 定义 表格 表 头 ， 通 常 表现 为 标题 行 。 





3) tbody: 定义 一 段 表格 主体 ， 




















一 个 表格 可 以 有 多 个 主体 ， 可 以 按照 行 来 进行 分 组 。 














4) tfoot: 定义 表格 的 脚 尾 ， 通 常 表现 为 总 计 行 。 
































基本 语法 如 下 : 


<table width="500"> 


<caption> 表 格 标题 </caption> 


<thead> 
<tr> 


<th> 表 格 头 部 </th> 


</tr> 
</thead> 
<tbody> 

<tr> 


<td> 表 格 主体 </td> 


</tr> 
</tbody> 
<tfoot> 

<tr> 


<td> 表 格 底部 </td> 
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</tr> 
</tfoot> 
</table> 























tbody 包含 行 的 内 容 下 载 完 优先 显示 ， 不 必 等 待 表格 结束 。 另 外 ， 还 需要 注意 表格 行 本 
来 是 从 上 癌 下 显示 的 ， 但 是 应 用 了 <thead><tbody> <tfoot> 以后， 就 “从 头 到 脚 ” 显 示 ， 即 不 


管 行 代码 顺序 如 何 ， 即 使 <thead> 写 在 了 <tbody> 的 后 面 ， 网 页 显示 时 ， 还 是 先 <thead> 后 
<tbody> 显 示 。 


342 U00000 


通过 设置 表格 的 直列 化 可 以 对 表格 的 列 进行 分 组 ， 以 便 对 其 进行 格式 化 。 
基本 语法 如 下 : 







































































































































































<colgroup style="background-color: yellow;"> <!-- 前 两 列 为 一 组 --> 
<col/> <!-- 第 一 列 --> 


<col /> <!-- 第 二 列 --> 





</colgroup> 
<col style="background-color: blue;"/> <!-- 第 三 列 --> 


代码 示例 如 下 : 


<table width="500"> 
<colgroup style="background-color: yellow;"> <!-- 前 两 列 为 一 组 --> 
<col /> <!-- 第 一 列 --> 
ed We | 
</colgroup> 
<col style="background-color: blue;"/> <!-- 第 三 列 --> 
<caption> 表 格 标题 </caption> 
<thead> 
<tr> 
<th> 头 1</th> 
<th> 头 2</th> 
<th> 头 3</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>111</td> 
<td>111</td> 
<td>111</td> 
</tr> 
<tr> 
<td>222</td> 
<td>222</td> 
<td>222</td> 
</tr> 
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</tbody> 
<tfoot> 
<tr> 
<td> 尾 1</td> 
<td> 尾 2</td> 
<td> 尾 3</td> 
</tr> 
</tfoot> 
</table> 


执行 代码 ， 显 示 效 果 如 图 3-20 所 示 。 


六 碌 属 直列 化 
GC |© 127.0.0.1:8020/HelloWorld/Ch03/table_colgroup.html? _ 








图 3-20 表格 直列 化 的 显示 效果 











如 需 对 全 部 列 应 用 样式 ，<colgroup> 标签 很 有 用 ， 这 样 就 不 需要 对 各 个 单元 和 各 行 重复 
应 用 样式 了 。 
注意 : <colgroup> 标签 只 能 在 <table> 中 使 用 。 

















3.5 ”章节 案例 : 完成 “特别 休假 申请 单 ” 
运用 本 章 所 学 内 容 ， 完 成 “特别 休假 申请 单 ”， 表 格 结构 如 图 3-21 所 示 。 












































只 | 4 

申请 日 期 : 年 月 日 
所 属 单位 “| 部 组 班 “ | 职称 |111 | 姓名 1111 厂 长 

年 月 日 上 1111 
乓 训 年 月 日 下 主管 
职务 代理 人 盖 章 有 
到 期 日 期 ”| 年 月 日 | 审核 意见 | 组 长 
全 年 特别 休假 数 天 |111 1111 1111 
已 请 假 数 天 人 事主 任 ”| 人 事 经 办 ”| 组 长 
本 次 申请 日 数 天 | | 
沿 剩 申请 日 数 Ea 下 了 i 











图 3-21 特别 休假 申请 单 的 表格 结构 
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【案例 代码 】 


<!IDOCTYPE html> 
<html> 
<head> </head> 
<body> 
<h2 style="width: 500px; text-align: center; text-decoration: underline;"> 特 别 休假 申请 单 <4h2> 
<p> 申 请 日 期 : &nbsp;&nbsp; 年 &nbsp;&nbsp; 月 &nbsp;&nbsp; 日 </p> 
<table width="500" border="1" style="border-collapse: collapse;"> 
<tr> 





















































<td> 所 属 单位 </td> 
<td>&nbsp; 部 &nbsp; 组 &nbsp; 班 </td> 
<td> 职 称 </td> 
<td>111</td> 
<td> 姓 名 </td> 
<td>111</td> 
<td> 厂 长 </td> 
</tr> 
<tr> 





<td rowspan="2"> 期 间 </td> 
<td colspan="3">&nbsp; 年 &nbsp; 月 &nbsp; 日 </td> 
<td colspan="2" rowspan="2"> 天 数 </td> 
<td>111</td> 

</tr> 

<tr> 


















































<td colspan="3">&nbsp; 年 &nbsp; 月 &nbsp; 日 </td> 
<td> 主 管 </td> 

</tr> 

<tr> 





<td colspan="2"> 职 务 代理 人 </td> 
<td colspan="4"> 盖 章 </td> 
<td>111</td> 

</tr> 

<tr> 





























<td> 到 期 日 期 <td> 
<td colspan="3">&nbsp; 年 &nbsp; 月 &nbsp; 日 </td> 
<td colspan="2"> 审 核 意见 </td> 
<td> 组 长 </td> 

</tr> 
<tr> 
<td colspan="2"> 全 年 特别 休假 数 </td> 
<td colspan="2" align="right"> 天 </td> 
<td>111</td> 
<td>111</td> 
<td>111</td> 

</tr> 

<tr> 
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<td colspan="2"> 已 请 假 数 </td> 
<td colspan="2" align="right"> 天 </td> 
<td> 人 事主 任 </td> 
<td> 人 事 经 办 </td> 
<td> 组 长 </td> 

</tr> 

<tr> 
<td colspan="2"> 本 次 申请 日 数 </td> 
<td colspan="2" align="right"> 天 </td> 
<td rowspan="2">111</td> 
<td rowspan="2">111</td> 
<td rowspan="2">111</td> 

</tr> 

<tr> 
<td colspan="2"> 尚 剩 申请 月 数 </td> 
<td colspan="2" align="right"> 天 </td> 

</tr> 

</table> 
</body> 
</html> 



































写 出 表格 的 基本 结构 (标题 、 表 头 、 其 他 单元 格 等 )。 
表格 的 align、cellspacing、cellpadding、bgcolor、bodercolor、background 分 别 表示 
什么 属性 ? 
3. 常见 的 行列 属性 有 哪些 ? 表格 属性 与 行列 属性 冲突 时 的 优先 级 是 怎样 的 ? 
4. 表格 的 align 属性 是 否 会 影响 行列 的 对 齐 方 式 ? 行 的 align 属性 是 否 会 影响 单元 格 的 
对 齐 方式 ? 
5 如何 实现 表格 的 跨行 、 跨 列 ? 











【章节 练习 】 
1. 
2 











rT 
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0 40 HITIML2D0D 














在 网 页 中 ， 表 单 主要 用 于 用 户 填 写 信息 ， 并 将 获得 的 信息 传递 到 后 台 服 务 器 端 ， 使 网 页 
具有 交互 功能 的 元 素 。 在 HIMLS 中 ， 表 单 增加 了 新 元 素 ， 表 单元 素 也 增加 了 许多 新 属性 ， 
让 表单 的 使 用 更 加 便利 。 

本 章 学 习 目 标 : 

> 熟悉 表单 的 结构 。 

> 掌握 表单 的 input 元 素 及 其 他 元 素 。 

> 掌握 表单 input 元 素 的 type 属性 。 

> 了 解 HIMLS 智能 表单 的 新 增 元 素 及 属性 。 

表单 元 素 在 Web 开发 中 必 不 可 少 ， 通 过 本 章 的 学 习 ， 读 者 可 以 掌握 表单 中 的 元 素 操 作 
以 及 input 的 type 属性 的 运用 ， 熟 练 学 握 表 单 的 相关 操作 。 






















































































“1 .起 单 倍 介 


表单 用 于 让 用 户 填写 信息 并 提交 给 服务 器 进行 处 理 ， 它 的 用 途 有 很 多 ， 如 网 站 的 注册 登 
录 、 在 线 购物 的 购物 车 、 论 坛 留 言 板 等 功能 。 图 4-1 所 示 的 QQ 注册 中 就 使 用 了 表单 。 


欢迎 注册 QQ 


每 一 天 ， 乐 在 沟通 。 免费 靓 号 


























+86 

















图 4-1 利用 表单 进行 QQ 注册 





411 00000 


表单 由 许多 表单 控件 组 成 ， 主 要 包括 用 户 填写 信息 部 分 和 表单 提交 按钮 。 用 户 填写 数据 
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完成 后 ， 单 击 “ 提 交 ” 按 钮 就 可 以 发 送 数据 到 服务 器 ， 经 过 后 台 程 序 处 理 后 将 用 户 所 需 的 信 


息 返 回 到 客户 端 ， 在 浏览 器 中 展示 给 用 户 ， 表 单 内 容 由 <form></form> 包 庄 。 
基本 语法 如 下 ; 



















































































<form> 
各 种 表单 控件 


</form> 





412 0UO000000 
表单 的 常用 属性 有 3 种 。 
1. action 属性 
action 属性 用 于 指定 表单 提交 时 向 何 处 发 送 表 单数 据 ， 即 需要 发 送 的 服务 器 地 址 。 基 本 
语法 如 下 : 













































































<form action="form.php"> 
各 种 表单 控件 


</form> 





2. method 属性 

method 属性 用 于 指定 表单 向 服务 器 提交 数据 的 方法 ， 包 括 两 种 方法 ， 分 别 是 get 和 
post。 这 两 种 方法 各 有 特点 ， 下 面 分 别 进行 具体 介绍 。 

(1) get 方法 的 特点 

使 用 URL (统一 资源 定位 符 〉 传递 参数 : http:/ 服 务 器 地 址 ?namel=valuel&name2= 
value2， 其 中 “?” 符 号 表示 要 进行 参数 传递 ，“? ”符号 后 面 采 用 “name=value” 的 形式 传 
递 ， 多 个 参数 之 间 ， 用 “区 ”符号 连接 。URL 传递 的 数据 量 有 限 ， 只 能 传递 少量 数据 。 

注意 : 使 用 URL 传递 参数 并 不 安全 ， 所 有 信息 可 在 地 址 栏 中 看 到 ， 并 且 可 以 通过 地 址 
栏 随意 传递 其 他 数据 。 


(2) post 方法 的 特点 

将 数据 封装 后 使 用 http 请 求 传道， 信息 在 地 址 栏 中 不 可 见 ， 比 较 安 全 ， 并 且 传 递 的 数据 
里 论 上 没有 限制 。 

综 上 所 述 ， 虽 然 get 方法 是 表单 提交 的 默认 方法 ， 但 是 通常 采用 post 方法 传递 数据 。 
基本 语法 如 | 



































































































































































































































el 






























































<form action="form.php" method="post"> 
各 种 表单 控件 


</form> 





3. enctype 属性 

enctype 属性 指定 表单 发 送 的 编码 方式 ， 只 有 method="post" 时 才 有 效 ， 共 有 三 种 属性 值 。 

1) application/x-www-form-urlencoded: 此 为 默认 值 ， 如 果 enctype 属性 省 略 不 写 ， 则 表 
示 采 取 此 种 编码 方式 。 
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2) multipart/form-data: 不 对 字符 编码 ， 用 于 上 传 文件 时 使 用 。 
3) text/plain: 将 空格 转换 为 “+” 符 号 ， 但 不 编码 特殊 字符 ， 通 常 在 将 表单 发 送 到 电子 


邮箱 时 使 用 。 








4.2 linput 输入 框 


作为 表单 最 重要 的 元 素 ，input 输入 框 用 于 搜集 用 户 信息 。 根 据 不 同 的 type 属性 值 ， 可 
以 用 多 种 形式 输入 内 容 。 例 如 ， 当 type 值 为 password 时 就 可 以 设置 输入 框 为 输入 密码 形 
式 ， 此 时 用 户 输入 的 内 容 用 小 黑 点 代替 显示 。 灵 活 使 用 input 输入 框 可 以 让 表单 收集 更 多 的 
信息 ， 下 面 来 具体 学 习 input 输入 框 的 相关 属性 和 类 型 。 


42.1 inputDODDDO 
1. type 属性 
type 属性 表示 input 输入 框 的 类 型 ， 它 的 默认 值 是 text。 所 有 浏览 器 都 支持 type 属性 ， 
但 是 type 的 属性 值 并 不 是 所 有 浏览 器 都 可 以 支持 ， 本 节 介 绍 的 属性 值 所 有 浏览 器 均 可 支持 ， 
但 后 续 小 节 提 到 的 某 些 HTMLS5 表单 新 增 属性 值 则 需要 注意 浏览 器 的 兼容 性 。 

















































































































































































































2，mname 属性 
name 属性 表示 input 输入 框 的 名 称 ， 一 般 必 填 。 因 为 传递 数据 时 ， 使 用 “name=value” 
的 形式 传递 。 

3. value 属性 
value 属性 表示 input 输入 框 的 默认 值 。 
代码 示例 如 下 : 

<form action="form.php" method="post"> 

请 输入 内 容 : 

<input name="text1" type="text" value=" 输 入 框 的 默认 值 "/> 
</form> 


显示 效果 如 图 4-2 所 示 。 


GG |© 127.0.0.1:8020/HelloWorld/ch04 form.html?_hbt=15040541... 安 | :; 


请 输入 内 容 : 答 入 框 的 默认 值 





图 4-2 输入 框 的 默认 值 显示 效果 





4. placeholder 属性 

placeholder 属性 表示 输入 框 中 的 提示 信息 ， 当 输入 框 有 value 属性 的 时 候 ， 提 示 内 容 会 
消失 ， 转 而 显示 value 属性 值 。 

代码 示例 如 下 : 














<form action="form.php" method="post"> 
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请 输入 内 容 : 
<input name="text1" type="text" placeholder=" 请 输入 "/> 
</form> 


显示 效果 如 图 4-3 所 示 。 


口 输入 框 履 性 
GC |© 127.0.0.1:8020/HelloWorld/ch04 form.html?_hbt=15040541 





请 输入 内 容 : | 请 洽 》 




















图 4-3 ”输入 框 的 提示 信息 





5. tabindex 属性 

tabindex="1” 此 属性 控制 按 Tab 键 时 的 跳 转 顺序 ， 从 最 小 的 数值 开始 ， 逐 个 往 大 的 数值 
跳 转 ， 依 次 获得 焦点 。 

6. input 元 素 的 其 他 属性 

除 以 上 属性 外 ，input 还 有 一 些 属 性 名 等 于 属性 值 的 特殊 属性 ， 具 体 如 下 : 

1) checked="checked" 默认 选中 。 

2) disabled="disabled" 设置 控件 不 能 使 用 。 用 在 按钮 上 效果 为 不 能 单 击 ， 用 在 输入 框 上 
则 表示 不 能 修改 。 而 且 ， 如 果 输 入 框 设置 为 disabled， 则 输入 框 中 的 信息 不 能 往 后 台 传递 。 

3) hidden="hidden" 设置 隐藏 控件 。 基 本 语法 如 下 : 




























































































<input type="hidden" name="username" value="1234" /> 


它 常 用 于 配合 disabled 属性 ， 或 根据 其 他 需要 ， 使 用 隐藏 域 传递 数据 。 
除了 上 面 介绍 的 input 输入 框 具有 此 类 特殊 属性 ， 表 单 的 其 他 部 分 控件 也 有 此 类 属性 名 
等 于 属性 值 的 属性 ， 具 体 属性 会 在 后 续 小 节 中 介绍 。 


42.2 tekUDOO0ODODO 

文本 输入 框 用 于 输入 单行 文本 ， 默 认 宽 度 为 20 个 字符 。 在 登录 注册 时 ， 常 常用 到 文本 
输入 框 ， 它 主要 用 于 填写 用 户 名 称 。 代 码 示例 的 运行 效果 如 图 4-4 所 示 。 

代码 示例 如 下 : 























































































































而 














<form action="form.php" method="post"> 
请 输入 内 容 : 
<input name="textl" type="text" maxlength="10" size ="5"/> 
<!-- 上 述 代码 表示 这 个 文本 输入 框 的 最 大 字符 长 度 为 10， 可 显示 的 字符 数 为 5 --> 


</form> 





Vorld/ch04 form.html?_hbt=15040541... 会 | }: 


请 输入 内 容 : 





图 4-4 文本 输入 框 的 运行 效果 
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4.2.3 password] UUDODODOD 

密码 输入 框 输入 的 内 容 会 以 小 黑 点 的 形式 替代 显示 。 最 常见 的 一 种 用 法 就 是 用 户 注册 登 
录 时 需要 输入 账号 密码 框 ， 小 黑 点 的 形式 可 以 有 效 地 避免 密码 泄露 。 

代码 示例 如 下 : 





























<form action="form.php" method="post"> 

请 输入 内 容 : 

<input name="pwd" type="password" maxlength="16"/> 
</form> 





代码 运行 效果 如 图 4-5 所 示 。 


口 输入 框 尖 型 
GG |© 127.0.0.1:8020/HelloWorld/ch04 form.html?_hbt=15040541 














请 输入 密码 : 














图 4-5 密码 输入 框 





42.4 radio] DODOODOO 


单 选 按 钮 用 于 填写 表单 时 信息 选择 ， 如 调查 问卷 中 的 单 选 题 。 
代码 示例 如 下 : 


<form action="form.php" method="post"> 






































<input type="radio" name="sex" value=" 男 " checked="checked" /> 男 
<input type="radio" name="sex" value=" 女 " /> 女 
</form> 





代码 运行 效果 如 图 4-6 所 示 。 











口 input 新 增 检 入 类 型 
GC [© 127.0.0.1:8020/He 





图 4-6 单 选 按钮 效果 
注意 : 
> name 和 value 属性 需 同 时 存在 ， 提 交 时 ， 提 交 的 是 value 中 的 属性 值 。 
例如 : <input type="radio" name="sex" value=" 男 "/> 提交 时 ， 显 示 "Sex= 男 "。 
> radio 凭借 name 属性 区 分 是 否 为 同一 组 。name 相同 ， 为 同 组 ， 同 组 中 只 能 选择 
> checked="checked" 默认 选中 。radio 只 能 选 一 个 ，checkbox 可 以 选 多 个 。 


42.5 checkbox] 0DDD 


复 选 按钮 与 单 选 按钮 相同 ， 也 用 于 填写 表单 时 信息 选择 ， 如 调查 问卷 中 的 多 选 题 。 
代码 示例 如 下 : 


<form action="form.php" method="post"> 
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爱好 选择 : 
<input type="checkbox" name="hobby" value="sing" checked="checked" /> 唱歌 
<input type="checkbox" name="hobby" value="draw" checked="checked" /> 画 画 
<input type="checkbox" name="hobby" value="dance" /> 跳舞 

</form> 


代码 运行 效果 如 图 4-7 所 示 。 


口 inpu 启 描 术 和 型 x 
© |© 127.0.0.1:8020/HelloWorld/HTMLS/ch04 form.html?_hbt=151... 人 六 | © 











爱好 选择 ， 回 唱歌 四 画 画 日 跳 反 





图 4-7 复 选 按钮 效果 





42.6 fildg0O00000 
文件 上 传 按钮 用 于 文件 上 传 ， 单 击 “ 选 择 文件 ”按钮 会 弹出 对 话 框 ， 选 择 需 要 上 传 的 文 
件 。 图 4-8 和 图 4-9 是 代码 运行 效果 。 
代码 示例 如 下 : 
<form action="form.php" method="post" enctype="multipart/form-data "> 


<input type="file"/> 
</form> 


代码 运行 效果 如 图 4-8 所 示 。 单 击 “ 选 择 文件 ”按钮 ， 在 弹出 的 对 话 框 中 选择 需 上 传 的 
文件 ， 如 图 4-9 所 示 。 





© IO 127.0.0.1:8020/HelloWorld/ch04 form.html?_hbt=15040541... 女 | : 





选择 文件 | 未 选择 任何 文件 





图 4-8 文件 上 传 按钮 效果 





TW3Cfunsjcss 权 RE5Capture - 局 。 HTML5 与 CS53 HTMLSCSSA 门 
看 岗 《入 3 厂 ) 再 方 式 RE 
pdf 











上 生 EE 


JavaScript 可 三 。 JavaScript 学 习 。 JaveSeript 王 商 。 Jova 从 入 门 到 燃 。 javs 下 起 rr 
6 本 中 文 霹 迁 (从 订 栈 ) 。 池 ( 秒 3 经 ) rar 
-pdf 





图 4-9 弹出 对 话 框 选择 文件 
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4.2.7 submit] 品 


HTMLS+CSS3+JavaScript 


UUU0UDO 


表单 提交 按钮 用 于 提交 表单 数据 ， 单 击 按钮 后 ， 表 单 中 用 户 填写 的 信息 会 被 发 送 到 表单 


指定 的 地 方 进行 处 天 








EE。 图 4-10 为 一 个 设置 了 value 值 的 submit 表单 提交 按钮 。 当 没有 value 


值 时 ，submit 按钮 中 默认 显示 的 文字 为 “提交 ”。 


代码 示例 如 下 : 


<form action="form.php" method="post"> 
<input type="submit"" value=" 登 录 "/> 


</form> 


代码 运行 效果 如 图 4-10 所 示 。 





Cc IO 127.0.0.1:8020/HelloWorld/HTML5/ch04 form.html?_hbt=151... 人 女 | @ 

















42.8 rese 册 0 





图 4-10 表单 提交 按钮 效果 


串口 


重 管 按钮 将 表单 数据 重 置 为 初始 状态 ， 通 常 是 清空 表单 已 填 内 容 。 




















代码 示例 如 下 : 




















<form action="form.php" method="post"> 
<input type="text" value=" 输 入 框 的 默认 值 /> 
<input type="text" placeholder=" 请 输入 "/> 
<input type="reset"/> 


</form> 


图 4-11 和 图 4- 





12 是 单 击 重 置 按钮 前 后 的 显示 效果 。 





Cc | © 127.0.0.1:8020/HelloWorld/HTML5/ch04 form.html?_hbt=151.. 














jredu [23 EH 














图 4-11 重 置 前 效果 





[a |O 127.0.0.1:8020/HelloWorld/HTML5/ch04 form.html?_hbt=151.… 








| 给 入 框 的 默认 值 ] 请 给 入 | 重 界 
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图 4-12 重 置 后 效果 
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42.9 imagd]0DDODODO 

图 形 提交 按钮 需要 添加 src 属性 来 设置 图 片 路 径 。 功 能 与 supmit 相同 ， 可 以 提交 表单 数 
据 ， 通 常 在 美化 网 页 时 会 用 到 图 形 提交 按钮 来 代替 默认 的 提交 按钮 ， 使 页 面 更 加 美观 。 图 4-13 
是 一 个 使 用 图 片 制作 的 图 形 提交 按钮 。 

代码 示例 如 下 : 






























































<form action="form.php" method="post"> 
<input type="image" src="http://www.jredul00.com/statics/images/index/top/logo.png"/> 
</form> 


> GC |© 127.0.0.1:8020/HelloWorld/ch04 form.html?_hbt=15040541 食 | : 


上 杰 瑞 教育 


图 4-13 图形 提交 按钮 效果 











42.10 buttonlDDODDOD 


定义 一 个 可 单 击 的 按钮 ， 通 常 与 JavaScript〈 后 面 会 有 专门 的 篇 章 讲解 ) 一 起 使 用 来 启 
动 脚本 。 下 面 的 代码 就 利用 button 按钮 在 浏览 器 中 显示 了 一 个 弹 窗 ， 图 4-14 是 单 击 “ 点 
我 ! ”按钮 后 出 现 弹 窗 的 效果 。 

代码 示例 如 下 : 






























































<form action="form.php" method="post"> 
<input type="button" value=" 点 我 ! " onclick="alert( 这 是 一 个 按钮 ! )" /> 
</form> 


GC |© 127.0.0.1:8020/HelloWorld/HTML5/ch04_form.html?_hbt=151... 


127.0.0.1:8020 显示 : 


这 是 一 个 按钮 ! 


Lm | 




















图 4-14 ”可 单 击 按钮 的 弹 窗 效果 





4.3 其 他 表单 元 素 


431 seectDDODOODOD 

在 表单 中 通过 <select> 控 件 可 以 创建 一 个 下 拉 式 的 列表 或 带 有 滚动 条 的 列表 ， 可 以 在 列 
表 中 选中 一 个 或 多 个 选项 ， 通 常用 于 填写 生日 、 所 在 地 区 等 信息 。 开 发 人 员 提 前 设计 好 选 
项 ， 让 用 户 在 填写 信息 时 可 以 直接 选择 ， 更 加 方便 用 户 使 用 。 
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基本 语法 如 下 : 


<form action="form.php" method="post"> 
<select name="week"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7 </option> 
</select> 
</form> 





代码 运行 效果 如 图 4-15 所 示 。 











口 input 新 增 绽 入 类型 。 x 
GC | © 127.0.0.1:8020/HelloWorld/ 


今天 是 星期 : [75] 








图 4-15 下 拉 列 表 代码 运行 效果 
1. <select> 标 签 的 属性 
1) name=" 列 表 名 ": 所 有 选项 只 有 一 个 name。 
2) multiple="multiple": 设置 select 控件 为 多 选 ， 可 在 列表 中 使 用 Ctrl 键 + 鼠标 进行 多 
选 。 一 般 不 用 。 
3) size="1": 规定 下 拉 列 表 中 可 见 选项 的 数目 。 如 果 size 属性 的 值 大 于 1， 但 是 小 于 












































代码 示例 如 下 : 


<form action="form.php" method="post" size="5" multiple="multiple"> 
<select name="week"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
</select> 
</form> 




















| 





代码 中 给 下 拉 列 表 设 置 了 multiple 和 size 属性 ， 在 图 4-16 中 可 以 看 到 ， 列 表 只 显示 了 5 
项 ， 其 余 项 需要 通过 拖 动 深 动 条 才能 查看 。 
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口 input 新 增 输入 类 型 
GC |© 127.0.0.1:8020/HelloWorld/HTML5/ch04 form.html?_hbt=151 


1 医 
今天 是 星期 : i 














图 4-16 添加 multiple 和 size 属性 的 下 拉 列 表 





2. <option> 标 签 的 属性 

1) value="": 分 为 两 种 情况 。 

当选 项 option 没有 value 属性 时 ， 往 后 台 传 递 的 是 <option></option> 标 签 中 的 文字 ; 当 
选项 option 有 value 属性 时 ， 往 后 台 传递 的 是 value 属性 的 值 。 

2) title=": 鼠标 指 上 后 显示 的 文字 ， 与 图 片 的 title 属性 类 似 。 

3) selected="selected": 默认 选中 ， 即 select 的 初始 值 。 

3. 利用 <optgroup> 标 签 分 组 

<optgroup label=" 分 组 名 "></optgroup> 用 于 将 <option> 标 签 进 行 分 组 ，label 属性 表示 分 组 
名 。 下 面 的 示例 就 是 选项 分 组 的 一 个 应 用 ， 在 从 下 拉 列 表 选 择 地 区 城市 时 可 以 根据 省 份 、 城 
市 的 不 同 进 行 分 组 ， 方 便 用 户 查 找 选 择 。 

代码 示例 如 下 : 



















































































<form action="form.php" method="post"> 
<select name="city"> 

<optgroup label=" 山 东 省 "> 
<option value="1" title=" 青 岛 "> 青岛 </option> 
<option value="2" selected="selected"> 烟 台 </option> 
<option value="3"> 济 南 </option> 

</optgroup> 

<optgroup label=" 北 京 市 "> 
<option> 海 淀 区 </option> 
<option> 阴 阳 区 </option> 

</optgroup> 























</select> 
</form> 





代码 运行 效果 如 图 4-17 所 示 。 











口 下 拉 列 表 


> GC |© 127.0.0.1:8020/HelloWorld/ch04 form.html?_hbt=15040541... 























图 4-17 采用 分 组 形式 的 下 拉 列 表 效 果 
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4.3.2 texdarea[ [D0 


与 <input> 的 type="text" 不 同 ，<textarea> 创 建 的 文本 域 是 多 行 的， 文本 区 中 可 容纳 无 限 
数量 的 文本 ， 其 中 文本 的 默认 字体 是 等 宽 字 体 。 通 常 采 用 CSS 层 苔 样式 表 ) 来 设置 其 宽度 
和 高 度 。 文 本 域 常见 用 于 论坛 回复 的 文本 框 、 博 客 的 留言 板 等 。 
基本 语法 如 下 : 






































<form action="form.php" method="post"> 
<textarea style="width: 200px; height: 150px;"> 这 是 文本 域 的 内 容 </textarea> 
</form> 


代码 运行 效果 如 图 4-18 所 示 。 














口 inpu 才 增 边 入 类 型 x 
GG | © 127.0.0.1:8020/HelloWorld/HTML5/ch04 form.html?_hbt=151... 


这 是 文本 域 的 内 容 





图 4-18 添加 CSS 的 文本 域 效 果 


文本 域 的 属性 如 下 : 

1) 设置 宽 高 : cols 规定 文本 域内 可 见 的 列 数 ，rows 规定 文本 域内 可 见 的 行 数 ， 但 这 种 
方式 并 不 常用 。 通 常用 CSS 来 规定 其 宽度 和 高 度 ， 如 : style="width: 200px; height: 150px;"。 

2) readonly="readonly": 设置 为 只 读 模式 ， 不 允许 编辑 。 

3) disable="disable": 设置 禁用 文本 域 。 

除 以 上 文本 域 自 带 属性 外 ， 还 时 常 通过 CSS 设置 其 样式 。 

1) style="resize: none;": 设置 宽 高 不 允许 拖 放 修改 。 

2) style="overflow: hidden;": 设置 当 文字 超出 区 域 时 ， 如 何 处 理 。 当 然 也 可 以 通过 
overflow-x/overflow-y 分 别 设 置 水 平 或 垂直 方向 的 显示 方式 。 

其 中 ，overflow 有 三 个 常用 属性 值 ，hidden 设置 超出 区 域 的 文字 ， 隐 藏 无 法 显示 ; 
scroll 设置 无 论文 字 多 少 ， 均 会 显示 滚动 条 ; auto 设置 为 自动 ， 根 据 文 字 多 少 自动 决定 是 否 
显示 滚动 条 〈 默 认 样 式 ) ， 这 种 情况 下 当 文 本 域 中 的 内 容 没 有 超出 范围 时 ， 滚 动 条 呈 灰 
色 状 。 


4.3.3 buttonD 


<button> 的 作用 是 定义 一 个 按钮 ， 与 <input> 创 建 的 按钮 功能 类 似 ， 也 可 以 与 JavaScript 
一 起 使 用 来 启动 脚本 。 
基本 语法 如 下 : 
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<form action="form.php" method="post"> 
<button type="button"> 这 是 一 个 按钮 </button> 
</form> 





























在 <button> 内 部 可 以 放置 内 容 ， 如 文本 或 图 像 。 这 是 该 元 素 与 使 用 <input> 创 建 的 按钮 
之 间 的 不 同 之 处 。 

注意 : 始终 需要 为 <button> 元 素 规定 type 属性 。 不 同 的 浏览 器 对 <button> 元 素 的 
type 属性 使 用 不 同 的 默认 值 。 

















4.4 再 IJML5 智 E 表 单 





在 HIML5 中 ， 表 单 新 增 了 一 些 属性 和 元 素 ， 这 些 属性 和 元 素 让 表单 变 得 更 加 方便 实 
用 。 例 如 ，autocomplete 属性 可 以 让 表单 具有 上 自动 完成 功能 ， 浏 览 器 会 根据 用 户 之 前 输入 的 
值 自 动 完 成 ， 这 就 让 表单 的 填写 更 加 方便 。 接 下 来 具体 学 习 HIMLS5 新 增 的 属性 和 元 素 。 


441 00D0D0 


<fieldset> 可 以 组 合 表单 中 的 相关 元 素 ， 将 表单 根据 不 同 的 内 容 进行 分 组 。 
基本 语法 如 下 : 






























































<form action="form.php" method="post"> 
<fieldset > 
<legend> 这 是 二 个 下 量 </legend> 


其 他 表单 控件 
</fieldset> 


</form> 


4-19 所 示 为 一 个 简单 的 表单 分 组 。 








现 











口 下 拉 列 表 
GO 127.0.0.1:8020/HelloWorid/ch04 form.html?_hbt=15040794..， 食 





这 是 一 个 表单 
请 输入 内 容 : 














图 4-19 一 个 简单 的 表单 分 组 























其 中 ，<fieldset > 表示 表单 边框 ，<legend> 表 示 表 单 标题 。 如 果 想 要 让 标题 嵌入 到 边框 
中 ， 则 需 将 标题 标签 写 到 边框 标签 里 面 ， 就 像 上 面 代码 示例 中 所 写 的 一 样 。 另 外 ， 一 个 表单 
可 以 有 多 个 边框 与 标题 的 组 合 。 

代码 示例 如 下 : 





























<form action="form.php" method="post"> 
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<fieldset > 


<legend> 这 是 表单 的 第 一 部 分 </legend> 




























































































































































































































































































其 他 表单 控件 
</fieldset> 
<fieldset > 
<legend> 这 是 表单 的 第 二 部 分 </legend> 
其 他 表单 控件 
</fieldset> 
</form> 
代码 运行 效果 如 图 4-20 所 示 。 
-En 
多 襄 input 新 洪 纺 入 类 型 x 全 
C |© 127.00.1 六 | @ 
这 是 表单 的 第 一 部 分 
请 输入 内 容 : 提交 
是 表单 的 第 二 部 分 = = 
ep : 提交 
图 4-20 多 个 表单 分 组 效果 
4.4.2 表单 新 增 元 素 及 属性 
1. HTMLS5 表单 新 增 元 素 
表 4-1 所 示 为 HTML5 表单 新 增 元 素 。 
表 4-1 HTMLS 表单 新 增 元 素 
新 增 元 素 描 述 
<datalist> <input> 标 签 定义 选项 列表 。 它 与 <input> 元 素 配合 使 用 来 定义 xinput> 可 能 的 值 
<keygen> <keygen> 标签 规定 单 的 密 钥 对 生成 器 字段 
<output> <output> 标签 定义 不 同类 型 的 输出 ， 比 如 脚本 的 输出 
以 第 一 个 <datalist> 为 例 ， 对 它 的 用 法 进行 介绍 ， 其 他 元 素 由 于 并 不 和 常用， 此 处 就 不 再 做 
出 详细 说 明 ， 感 兴趣 的 读者 可 以 查看 帮助 文档 深入 学 习 。 
<datalist> 具 有 和 autocomplete 类 似 的 自动 完成 功能 ， 但 它 还 有 一 个 功能 是 autocomplete 
属性 所 没有 的 ， 那 就 是 在 使 用 <datalist> 时 ， 它 可 以 根据 用 户 输入 的 内 容 ， 在 预先 设置 好 的 列 


表 中 筛选 出 与 用 户 输入 相关 的 信息 作为 备 选 。 
基本 语法 如 下 : 





<form action="form.php" method="post"> 
<input type="text" list="list" /> 
<datalist 1d="list"> 
<option>123</option> 
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</datalist> 
</form> 


代码 示例 如 下 : 


<form action="form.php" method="post"> 
请 输入 : 
<input type="text" list="list" /> 
<datalist id="list"> 
<option>123</option> 
<option>abc</option> 
<option>456</option> 
<option>def</option> 
<option>789</option> 
</datalist> 
</form> 


执行 代码 ， 输 入 框 激 活 时 右 侧 会 出 现 一 个 下 拉 箭 头 。 单 击 下 拉 箭 头 会 出 现 候选 内 容 如 


4-21 所 示 ， 当 输入 的 内 容 与 选项 列表 中 的 候选 内 容 相关 时 ， 就 会 在 下 拉 列 表 中 显示 相关 
内 容 ， 如 图 4-22 所 示 。 


© |@ 127.0.0.1:8020/HelloWorld/ch04 form.html?_hbt=15040794.， 廊 | ; 








| | v 

















图 4-21 下 拉 列 表 中 的 候选 内 容 


C |@ 127.0.0.1:8020/HelloWorld/ch04_form.html?_hbt=15040794..， 众 


请 输入 : 川 这 








123 








图 4-22 下 拉 列 表 中 的 相关 内 容 


2. HTMLS 表单 及 其 控件 部 分 新 增 属性 
(1) 表单 新 增 属性 
表单 新 增 属性 见 表 4-2。 
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表 4-2 表单 新 增 属性 






























































属 性 说 明 
规定 form 表单 具有 自动 完成 功能 。 当 用 户 在 自动 完成 域 中 开始 输入 时 ， 浏 览 器 应 该 在 该 域 中 显示 填写 的 
autocomplete 村 
选项 
novalidate 规定 在 提交 表单 时 不 进行 验证 



































autocomplete 属性 值 有 on 和 off，novalidate 属性 值 有 true 和 false。 
(2) xinput> 标 签 新 增 属性 
<input> 标 签 新 增 属性 见 表 4-3。 


























表 4-3 <input> 标 签 新 增 属 性 




















































































































属 性 说 明 

autocomplete 阮 定 <input> 标 签 具有 自动 完成 功能 
autofocus 纲 定 在 页 面 加 载 时 ， 控 件 自动 地 获得 焦点 《不 过 一 个 页 面具 能 有 一 个 控件 使 用 该 属性 ) 
required 网 定 输入 的 字段 是 必需 的 (必须 填写 ) 
pattern 岗 定 通过 其 检查 输入 值 的 正则 表达 式 
form overrides 纲 定 表单 重 写 属 性 
form 纲 定 输入 域 所 属 的 一 个 或 多 个 表单 

表 4-3 中 的 前 三 个 属性 比较 简单 ， 本 书 不 再 展开 具体 介绍 ， 第 四 个 属性 pattern 是 用 于 













































































RR 关于 正则 表达 式 将 在 本 书 的 第 18 章 中 进行 详细 

讲解 ， 此 处 不 做 具体 介 
表 4-3 性 form overrides 是 一 个 合集 ， 实 际 上 它 包 括 有 多 个 属性 ， 具 体 

如 下 : 

1) formaction: 重 写 表单 的 action 属性 。 

2) formenctype: 重 写 表单 的 enctype 属性 。 

3) formmethod: 重 写 表单 的 method 属性 。 

4) formnovalidate: 重 写 表单 的 novalidate 属性 。 

5) formtarget: 重 写 表单 的 target 属性 。 

上 述 表单 重 写 属性 与 type="submit" 配 合 使 用 ， 会 在 提交 时 修改 表单 的 属性 值 。 








































































































图 

















































































































对 于 表 4-3 中 的 最 后 一 个 属性 form， 其 具体 用 法 是 为 特定 的 form 表单 添加 id， 青 为 希 
望 与 表单 一 起 提交 的 表单 元 素 添 加 form 属性 ， 从 而 实现 <input> 无 须 放 在 <form> 标 签 之 中 ， 
也 可 通过 表单 进行 提交 ， 使 用 这 种 方式 可 以 在 设计 页 面 时 不 再 局 限于 表单 的 固定 位 置 ， 让 页 
面 更 加 美观 。form 属性 的 代码 示例 如 下 : 


<form action="form.php" method="post" id="form1"> 《<! 一 为 表单 添加 id 属性 --> 
用 户 名 :<input type="text" name="name" list="datal" maxlength="6"/> 
<datalist id="datal"> 

<option>1234</option> 

<option>2234</option> 

<option>3234</option> 
</datalist> 






























































AAA 
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密码 :<input type="password" name="pwd" /> 

<input type="submit" value=" 提 交 " /> 
</form> 
<! 一 在 表单 外 的 <input> 添 加 了 form 属性 ， 其 内 容 会 随 表单 一 起 提交 --> 
表单 外 的 输入 框 : <input type="text" name="test" form="form]1" /> 

















(3) <input> 标 签 新 增 输入 类 型 
<input> 标 签 新 增 输入 类 型 见 表 4-4。 这 些 新 增 输入 类 型 在 不 同 浏览 器 中 显示 效果 会 有 所 
不 同 ， 另 外 在 某 些 不 支持 新 增 输入 类 型 的 浏览 器 中 可 能 功能 无 法 使 用 。 



































表 4-4 <input> 标 签 新 增 输入 类 型 




























































































输入 类 型 作 浏览 器 支持 

color 定义 拾 色 器 Opera、Chrome 

date 限制 用 户 输入 时 间 格 式 Opera、Chrome 

email 限制 用 户 输入 email 格式 JE10 以 上 版 本 、Firefox、Opera、Chrome、Safari 
number 限制 用 户 输 入 数字 格式 IE10 以 上 版 本 、Opera、Chrome、Safari 

range 定义 包含 一 定 范围 内 的 值 的 数字 字段 IE10 以 上 版 本 、Opera、Chrome、Safari 

search 定义 用 于 输入 搜索 字符 串 的 文本 字段 Chrome、Safari 

表 4-4 中 输入 类 型 的 代码 示例 如 下 : 


<form> 

拾 色 器 : xinput type="color" name="test" /><br /><br /> 
日 期 选择 : <input type="date" name="test" /><br /> <br /> 
电子 邮件 : <input type="email" name="test" /><br /><br /> 
数字 输入 框 : <input type="number" name="test" /> <br /> <br /> 
滑 块 输入 :<input type="range" name="test" /><br /><br /> 
搜索 框 : <input type="search" name="test" /><br /><br /> 


</form> 























代码 运行 效果 如 图 4-23 所 示 。 








/4 





拾 色 器 : 是 


日 期 选择 : |2017/08/15 








电子 邮件 : 








数字 输入 框 : 123 


滑 块 输入 : 


搜索 框 : abcdef 





zal 


4-23 ”xinput> 标 签 新 增 输入 类 型 效果 
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下 面 对 这 几 种 新 增 的 输入 类 型 进行 详细 介绍 。 

1) 拾 色 器 功能 : 单 击 色 块 后 会 弹出 “颜色 ”对 话 框 (图 4-24)， 让 用 户 来 选择 颜色 。 

2) 日 期 选择 功能 ， 在 鼠标 移 到 输入 框 时 会 在 右 侧 出 现下 拉 箭 头 ， 单 击 箭头 则 会 出 现 如 
图 4-25 所 示 的 日 期 选择 框 。 

3) 电子 邮件 功能 ， 这 个 功能 不 用 做 过 多 解释 ， 当 输入 框 的 type 属性 设置 为 email 时 ， 


输入 的 内 容 必 须 符合 电子 邮件 的 基本 规范 。 


色调 (E): | 146 | 红 (R): 52 
饱和 度 (9): 109 | 绿 (G): 33 
基色 | 纯色 (O) 亮度 (D: |90 | 蓝 (U): 139 
























































国 国 加 
国 国 加 | | 
加 加 


醒 面 丁丁 国 面 司 司 
本 本 | 醒 国 国 国 司 


添加 到 自 定义 颜色 从 ) 











图 4-24 “颜色 ”对 话 框 














4) 数字 输入 框 功 能 : 当 鼠 标 移 到 输入 框 上 时 ， 会 出 现 上 下 调整 的 箭头 按钮 〈 图 4-26)， 
此 时 可 以 通过 单 击 按钮 调整 数值 ， 也 可 以 通过 键盘 直接 输入 。 








2018 年 05 月 ~ 4||@|| 





周一 周二 周三 周 四 周 五 周 X 周 日 

1 上 3 4 5 6 
7 8 9 10 1 12 13 
14 15 16 17 18 19 20 


21 22 23 24 25 26 27 
28 29 30 31 人 人数: 加 3| 


图 4-25 日 期 选择 图 4-26 ”数字 输入 框 






































5) 滑 块 输入 功能 : 滑 块 输入 将 显示 为 一 根 滑动 条 ， 根 据 用 户 滑动 的 位 置 确定 选中 的 数 
值 。 默 认 情 况 下 ， 最 左 端的 值 为 0， 最 右 端的 值 为 100。 可 以 通过 min 属性 和 max 属性 分 别 
确定 滑动 条 的 最 小 值 与 最 大 值 。 例 如 ， 网 页 中 的 音量 调节 功能 ， 就 可 以 使 用 滑 块 输入 功能 ， 
如 图 4-27 所 示 。 

6) 搜索 框 功能 : 在 搜索 框 被 激活 时 ， 与 普通 文本 输入 框 不 同 的 是 右 侧 会 有 一 个 又 号 
《图 4-28)， 单 击 “X 关 ”按钮 就 会 删除 用 户 在 输入 框 中 输入 的 所 有 内 容 。 

























































































言 量 调节 ; 目 控 索 : | 搜 到 x 
图 4-27 网 页 音量 调节 图 4-28 ”搜索 框 











50 
























































第 4 章 HTMLS 表单 
4.5 章节 案例 : 用 户 注册 页 面 实现 
运用 本 章 所 学 内 容 ， 完 成 如 图 4-29 所 示 的 用 户 注册 页 面 。 
用 户 注 册 
登录 名 可 包含 as-z、0-9 和 下 画 线 ) 阅读 服务 协议 
密码 : ( 至少 包 合 6 人 字符) 欢迎 阅读 服务 条 职 协 议 .,，，， 
再 次 输入 密码 : 
电子 邮箱 : ( 必须 包含 @ 字 符 ) 
性 别 男 女 
头像 选择 文件 | 未 选择 任何 文件 
爱好 运动 日 聊天 日 玩 游戏 
喜欢 的 城市 | 请 选择 ] * 
重 硕 
图 4-29 用 户 注册 页 面 案例 效果 图 
【案例 代码 】 
<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
<h1> 用 户 注册 </h1> 
<form action="" method="get"> 
<table> 
<tr> 
<td> 登 录 名 : </td> 
<td> 
<input type='"text" name="us" /> (可 包含 a-z、0-9 和 下 画 线 ) 
</td> 
<td> 
<b> 阅 读 服 务 协议 </b> 
</td> 
</tr> 
<tr> 
<td> 密 码 : </td> 
<td> 
<input type="password" name="mm" /> (至 少 包含 6 个 字符 ) 
</td> 


<td rowspan="8"> 


<textarea 
Overflow-y: scroll;" readonly="readonly"> 


style="height: 250px; width: 200px; resize: none; 


欢迎 阅读 服务 条 款 协 议 .……</textarea> 


</td> 
</tr> 
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<tr> 


</tr> 
<tr> 


</tr> 
<tr> 


</tr> 
<tr> 


</tr> 
<tr> 


</tr> 
<tr> 


</tr> 
<tr> 














<td> 再 次 输入 密码 : </td> 
<td> 





<input type="password" name="zcmm" /> 
</td> 














<td> 电 子 邮 箱 : </td> 
<td> 








bz 


<input type="text" name="dzyx" /> (必须 包含 @ 字 符 ) 
</td> 





<td> 性 别 : </td> 


<td> 


<input type="radio" name="sex" value=" 男 " checked="checked" /> 


加 





<input type="radio" name="sex" value=" 女 " /> 


女 


</td> 


<td> 头 像 ， </td> 
<td> 

<input type="file" accept="image/*" name="tx" /> 
</td> 


<td> 爱 好 :</td> 

<td> 
<input type="checkbox" name="ah" value=" 运 动 " /> 运动 
<input type="checkbox" name="ah" value=" 聊 天 " /> 聊天 
<input type="checkbox" name="ah" value=" 玩 游戏 " /> 玩 游戏 

</td> 


<td> 喜 欢 的 城市 : </td> 
<td> 
<select name="city"> 
<option>[ 请 选择 ]</option> 
<option> 青 岛 </option> 
<option> 烟 台 </option> 
</select> 
</td> 
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<td> </td> 


<td> 
<input type="submit" value=" 同 意 右 侧 服 务 条 款 ， 请 提交 注册 信 





息 " disabled="disabled" /> 





<input type="reset" value=" 重 填 " /> 




































































</td> 
</tr> 
</table> 
</form> 
</body> 

</html> 
【章节 练习 】 
1. 表单 的 常用 属性 包括 § 、 = 
2. 简 述 post 方法 与 get 方法 的 区 别 。 通 常 采 用 哪 种 ? 
3，<input> 标 签 type 属性 的 9 个 常用 类 型 分 别 为 text、password、 、 、 

、Iadio、 、 、 o 

4. 列举 五 个 以 上 表单 中 属性 名 等 于 属性 值 的 属性 。 



































5. 写 出 <datalist> 元 素 的 用 法 《以 代码 形式 ) 。 
6. 列举 智能 表单 <input> 标 签 的 新 增 输入 类 型 。 























Tt 
证 


人 
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第 2 篇 CSS3 


U20 CoU000 


学 习 了 HTML 后， 就 可 以 组 织 网 页 的 内 容 了 ， 但 网 页 并 没有 进行 美化 。 从 本 章 开始 ， 
读者 将 进入 CSS 环节 的 学 习 。CSS 是 层 半 样式 表 (Cascading Style Sheets) 的 简称 ， 是 一 种 
用 来 表现 HTML 等 文件 样式 的 计算 机 语言 。 

本 章 学 习 目 标 : 

> 了 解 CSS 的 基本 概念 及 语法 结构 。 

> 了 解 页 面 中 使 用 CSS 的 三 种 方式 。 

> 熟练 掌握 各 种 CSS 选择 器 的 使 用 。 

> 了 解 CSS 选择 器 命名 规范 及 优先 级 。 

通过 本 章 的 学 习 ， 读 者 可 以 初步 认识 并 学 会 使 用 CSS， 同 时 掌握 CSS 中 最 常用 的 选择 
器 概念 ， 能 够 用 CSS 进行 网 页 的 简单 美化 。 









































5.1 CSS 概述 


CSS 是 制作 网 页 必须 用 到 的 知识 ， 未 使 用 CSS 的 网 页 是 非常 简陋 的 ， 用 户 体验 非常 
差 。 未 使 用 CSS 时 网 页 的 呈现 情况 如 图 5-1 所 示 。 
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图 5-1 未 用 CSS 时 网 页 的 呈现 情况 
运用 CSS 进行 美化 后 ， 则 会 为 用 户 提 供 更 好 的 观感 ， 体 验 也 会 有 大 幅 提 升 。 图 5-2 所 
示 是 用 CSS 美化 后 的 页 面 。 
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图 5-2 用 CSS 美化 后 的 网 页 





5.1.1 CSSODO 


CSS 于 1996 年 由 W3C 组 织 制定 ， 最 新 的 版 本 为 CSS3， 主 要 用 于 美化 网 页 。CSS 是 对 
60 
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页 面 内 容 数 据 和 显示 风格 分 离 思 想 的 一 种 体现 ， 通 过 建立 定义 样式 的 CSS 文件 ， 让 HTML 
文件 调用 CSS 文件 所 定义 的 样式 ， 如 果 需 要 修改 HTML 中 的 部 分 显示 风格 ， 只 要 修改 对 应 
的 CSS 文件 即 可 ， 极 大 地 提高 了 工作 效率 。 


5.1.2 C990U00D0 


HTML 元 素 ， 选 择 器 的 声明 部 分 由 大 括号 包 里 ， 每 条 声明 由 一 个 属性 和 一 个 属性 值 组 成 。 属 
性 是 需要 对 元 素 进行 设置 的 样式 属性 ， 属 性 和 属性 值 用 冒号 分 开 ， 多 个 属性 之 间 用 分 号 分 隔 。 















































CSS 由 两 部 分 组 成 : 选择 器 及 一 条 或 多 条 声明 。 选 择 器 用 于 选中 用 户 需 要 改变 样式 的 



























































































































































基本 语法 如 下 : 
选择 器 { 
属性 :属性 值 ; 
[属性 :属性 值 ; …] 



































} 
代码 示例 如 下 : 


hl{ 


color:red; 





} 


代码 解释 如 下 : 

1) hl: 选择 器 ， 表 示 要 选择 所 有 的 hl 标签 。 

2) color: 属性 名 ， 表 示 要 对 字体 颜色 属性 进行 设置 。 
3) red: 属性 值 ， 表 示 要 设置 字体 颜色 为 红色 。 

4) 属性 与 属性 值 组 成 了 一 个 声明 ， 属 性 与 属性 值 之 间 用 冒号 分 隔 。 
使 用 CSS 时 ， 注 意 事项 如 下 : 

1) CSS 是 大 小 写 不 敏感 的 ， 但 规范 的 写法 是 全 部 小 写 。 

2) 规范 性 要 求 ， 行 只 写 一 个 声明 。 

3) 规范 性 要 求 ， 每 个 声明 后 边 需 要 添加 分 号 作为 结束 符 。 

4) 所 有 符号 均 为 英文 ， 切 勿 使 用 中 文 符号 。 

5) 注意 代码 的 缩 进 ， 用 HBuider 编写 代码 会 有 提示 ， 避 免 拼 写 错误 。 
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5.1.3 CSSDO 


ANS 

































































为 样式 表 添 加 注释 有 助 于 标记 样式 的 作用 范围 以 及 复杂 样式 的 作用 等 ， 便 于 进行 后 期 的 

















护 。CSS 添加 注释 的 方式 为 /*…… */。 注 释 代 码 示 例如 下 : 








/设置 hl 标签 的 样式 */ 
hl{ 
人/# 设 置 字体 颜色 为 红色 头 


color:red; 
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CSS 代码 作为 网 页 的 独立 的 模块 存在 ， 要 将 编写 好 的 CSS 应 用 于 HTML 标签 ， 使 其 产 
生效 果 ， 必 须 将 其 与 HTML 标签 关联 。 具 体 关联 方式 有 三 种 ， 行 内 样式 表 、 内 部 样式 表 和 
外 部 样式 表 。 


5.1.4 DOODOD 


行内 样式 表 ， 顾 名 思 义 ， 就 是 将 CSS 代码 放置 在 HTML 代码 内 部 ， 作 为 HTML 标签 的 
属性 存在 ，HTML 代码 与 CSS 代码 处 于 同一 行 中 。 
代码 示例 如 下 : 










































































<a href="#" style="color:red;font-size:10px;"> 日 用 百货 </a> 
<!-- 产 生 一 个 红色 的 ， 字 号 是 10px 的 超 链 接 --> 


行内 样式 表 的 特点 如 下 : 

1) 将 CSS 代码 与 HTML 代码 焰 合 在 一 起 ， 不 符合 W3C 关于 “内 容 与 表现 分 离 ” 的 基 
本 规范 ， 不 利于 后 期 维护 。 

2) 可 以 单独 定义 某 个 元 素 的 样式 ， 灵 活 方便 。 

3) 优先 级 最 高 ， 但 是 不 推荐 使 用 ， 仅 在 测试 时 可 以 条 用 。 


3.15 0U0000 


内 部 样式 表 也 称 为 内 构 样 式 表 ， 是 指 CSS 代码 内 柑 到 HTML 代码 中 ， 二 者 处 于 同一 个 
文件 中 ， 通 常 CSS 代码 放置 在 HTML 代码 的 <head> 标 签 内 部 。 
代码 示例 如 下 : 
































































































































<head> 
<!--charset="UTF-8" 表 示 当 前 文档 采用 字 各 
<meta charset="UTF-8"> 
<xtitle> 内 部 样式 表 </title> 





3 











集中 utt-8, 文 持 中 文 --> 

















全 











<!-- 内 部 样式 表 代码 要 放置 在 style 标签 内 --> 
<style type="text/css"> 
div{ 
color:red; 


} 
</style> 
</head> 
内 部 样式 表 的 特点 如 下 : 
1) 写 在 <head> 标 签 中 ， 一 定 程度 地 将 CSS 代码 与 HTML 代码 进行 了 分 离 ， 但 是 分 离 不 
够 彻底 ， 无 法 应 用 于 其 他 HTML 文件 ， 实 现 样 式 复 用 。 
2) 优先 级 低 于 行内 样式 表 。 


5.1.6 00000 
外 部 样式 表 是 指 CSS 代码 完全 独立 出 来 ， 单 独 放 置 在 扩展 名 为 .css 的 文件 中 ， 在 HTML 
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文件 中 ， 将 CSS 文件 引入 进来 ， 形 成 关联 。 
代码 示例 如 下 : 


<head> 

<meta charset="UTF-8"> 

<title> 外 部 样式 表 </title> 

<link rel="stylesheet" type="text/css" href="css/chO05.css" /> 
</head> 


其 中 ，<link> 标 签 具有 以 下 属性 : 

1) rel 属性 : 声明 被 链接 文档 与 当前 文档 的 关系 ， 必 有 写 。 

2) type 属性 : 被 链接 文档 的 类 型 ， 可 写 。 

3) href 属性 : 被 链接 文档 的 地 址 ， 必 写 。 

外 部 样式 表 的 特点 如 下 : 

1) 与 内 部 样式 表 一 样 ， 写 在 <head> 标 签 中 ， 实 现 了 CSS 代码 与 HTML 代码 的 彻底 分 
离 ， 方 便 样 式 复 用 与 后 期 维护 ， 符 合 W3C 规范 。 

2) 优先 级 要 低 于 内 部 样式 表 。 

3) 后 续 开 发 中 推荐 使 用 此 种 方式 。 

【扩展 阅读 】 导入 外 部 样式 表 的 另 一 种 方式 。 

导入 外 部 样式 表 除了 可 以 使 用 <link> 标 签 链接 外 ， 还 可 以 使 用 @import 的 方式 导入 。 

代码 示例 如 下 : 

































































































































































<head> 
<meta charset="UTF-8"> 
<title> 外 部 样式 表 </title> 
<style type="text/css"> 
@import url("css/ch05.css”); 
</style> 
</head> 


【两 种 导入 方式 的 区 别 】 

1) <link> 标 签 是 标准 的 HTML 标签 ， 而 import 不 是 。 

2) <link> 标 签 可 以 链接 各 种 形式 的 文件 ，import 只 能 导入 CSS 。 

3) <link> 标 签 使 用 的 是 链接 的 方式 ， 相 当 于 在 HTML 与 CSS 文件 中 的 桥梁 ， 而 import 
使 用 的 是 导入 的 方式 ， 会 在 文档 加 载 时 将 CSS 文件 的 代码 导入 到 HIML 文档 中 。 

4) <link> 标 签 会 在 网 页 边 加 载 的 时 候 链 接 CSS 文件 ， 而 import 会 在 HTML 文档 完全 加 
载 完 后 ， 才 导入 CSS 文件 。 

综 上 所 述 ， 一 般 使 用 <link> 标 签 进行 样式 表 的 导入 。 

注意 : CSS 优先 级 是 指 当 CSS 声明 发 生 冲 突 时 ， 即 将 在 两 个 不 同位 置 ， 对 同一 HTML 
标签 进行 同样 的 CSS 属性 定义 ， 但 取 值 不 同 。 优 先 采 用 的 属性 值 通常 是 按 就 近 原则 来 进行 
取 值 ， 即 行 级 样式 表 > 内 部 样式 表 > 外 部 样式 表 。 
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5.2 ”CSS 选择 器 


HA 








CSS 选择 器 是 指 CSS 选择 要 修饰 的 元 素 ， 对 指定 元 素 进行 修饰 美化 。 简 单 的 选择 器 可 
以 对 给 定 类 型 的 所 有 元 素 进行 格式 化 ， 复 杂 一 些 的 选择 器 可 以 根据 元 素 的 上 下 文 、 状 态 等 
应 用 样式 。 


5.2.1 DOOOD 
写法 : *{}。 
作用 : 选中 页 面 中 的 所 有 标签 ， 一般 用 于 定义 最 通用 的 属性 ， 设 置 默 认 值 。 


优先 级 ， 最 低 ， 低 于 所 有 选择 器 。 
代码 示例 如 下 : 


| 





































































































padding: Opx; 

margin: Opx; 

font-family: "微软 雅 黑 ",sans-serif; 
font-size: 12px; 
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写法 :HTML 标签 名 {样式 属性 :样式 属性 值 ;……}。 

作用 : 选中 页 面 中 所 有 的 对 应 标签 ， 当 需要 对 某 类 标签 进行 统一 设置 样式 时 采用 。 
优先 级 高 于 通用 选择 器 。 

代码 示例 如 下 : 


div{ 
width: 100%; 
height: 90px; 
background-color: red; 
} 
/HTML 部 分 代码 */ 
<div> 这 是 一 个 div</div> 


























































































































代码 含义 : 选择 所 有 <div> 标 签 ， 并 给 标签 设置 宽度 、 高 
面包 含有 多 个 <div> 标 签 时 ， 都 会 被 选中 。 
5.2.3 DODO0OD 

写法 : .类 名 称 {]。 

调用 : 在 需要 改变 样式 的 标签 上 ， 使 用 class=" 选 择 器 名 称 " 调用 对 应 选择 器 。 

作用 : 修改 所 有 调用 选择 器 的 标签 。 

优先 级 ;高 于 标签 选择 器 。 








出 














、 背 景色 等 样式 属性 ， 当 页 





河 
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代码 示例 如 下 : 


.first{ 
width: 200px; 
color: #F00; 
} 
/HTML body 部 分 代码 光 
<div> 
<ul> 
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<]i class="first"> 守 几 





<li> 洗 衣 机 <li> 
</ul> 
</div> 


代码 含义 : 选择 类 名 称 为 first 的 标签 


注意 事项 如 下 























已 器 </li> 








， 并 给 标签 设置 宽度 、 字 体 颜色 等 样式 属 





0 
天 二 
席 
O 









































1) 类 名 称 是 可 以 随意 取 名 的 ， 但 通用 做 法 是 只 能 包含 字母 、 数 字 、 下 面 线 ， 并 且 不 以 























数字 开头 ， 和 否则 可 能 会 7 








生 样 式 不 能 应 用 的 问题 。 














2) 类 名 称 应 该 能 表示 一 定 意义 ， 不 能 
面 需要 对 多 个 元 素 应 用 相同 样式 ， 则 采用 类 选择 器 。 
4) 类 选择 器 可 以 应 用 不 同 标签 。 








3) 当 页 














5.2.4 id0D0OD 
写法 : #id 名 称 { }。 


起 晤 无 意义 的 名 字 ， 如 a。 

















作用 : 在 需要 改变 样式 的 标签 上 ， 使 用 id= "选择 器 名 称 "调用 对 应 选择 器 。 














优先 级 : 大 于 类 选择 器 。 
代码 示例 如 下 : 
#list{ 


width: 200px; 
height: 200px; 


background-color: #CCC; 


} 


/HTML 部 分 代码 */ 
<div 1d="]ist"> 
<ul> 
<]l> 家 用 电器 </li> 
<li> 洗 衣 机 </li> 



































</ul> 
</div> 


代码 含义 : 选择 id 为 list 标签 ， 





























等 样式 属性 。 





并 给 标签 设置 宽度 、 高 度 、 背 景 
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注意 事项 如 下 : 
1) id 是 唯一 的 ， 同 一 页 面 不 能 出 现 多 个 相同 的 id 定义 。 
2) id 名 称 要 求 与 类 选择 器 相同 。 
3) 通常 当 页 面 中 有 唯一 样式 时 ， 采 用 id 选择 器 。 
222 0U0OOO0O0OO0O00000 
1， 后 代 选 择 器 




















~ 









































写法 : 选择 器 1 选择 器 2 选择 器 3……{} ， 每 个 选择 器 之 间 用 空格 分 隔 。 
代码 示例 如 下 : 
div if 


color: yellow; 


} 


























div.li{} 表 示 选 中 的 元 素 包 括 div 里 面 的 class="li" 的 元 素 ， 其 中 class="li" 的 元 素 可 以 是 
div 的 子 代 ， 也 可 以 是 div 的 后 代 ， 也 就 是 孙 代 及 往 后 。 

2. 子 代 选 择 器 

写法 : 选择 器 1> 选 择 器 2> 选 择 器 3……{} ， 每 个 选择 器 之 间 用 大 于 号 分 隔 。 

代码 示例 如 下 : 
































div>ul{ 
color: blue; 


} 




















div>ul{ } 表 示 Ql 必须 是 div 的 直接 子 代 ， 孙 代 以 后 不 选中 。 
2.26 DUOODOODOODOODOOO0OOD 


1. 交集 选择 器 

















写法 : 选择 器 1 选择 器 2……… {} ， 选 择 器 之 间 没 有 分 隔 符 。 
代码 示例 如 下 : 
.list#li{ 
color: red; 
} 




















.list#lif} 元 素 必 须 同时 具备 class="list" 并 且 id="li" 样 式 才能 生效 。 
2. 并 集 选择 器 
写法 : 选择 器 1, 选 择 器 2……{} ， 选 择 器 之 间 用 逗号 分 隔 
代码 示例 如 下 : 



































o 


i,#li{ 
color: red; 


} 
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i ,#1i{ } 元 素 只 要 


3.2.7 00000 

















写法 : 选择 器 名 称 : 伪 类 状态 {}。 


代码 示例 如 下 : 


a:hover{ 
color: red; 


} 
常见 的 伪 类 状态 妇 


nF 下 : 


link: 未 访问 状态 。 
visited: 已 访问 状态 。 





hover: 鼠标 指向 时 ， 即 悬 停 在 元 素 . 
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lL 备 class="li" 或 者 id="li"， 样 式 即 可 生效 。 





上 方 时 。 


active 激活 选 定 状态 (鼠标 点 下 去 没 松 开 )。 














































































































focus: 获得 焦点 时 (input 常用 )。 

超 链 接 多 种 伪 类 共存 时 的 顺序 如 下 : link 一 visited 一 hover 一 active。 
5.28 DDD0000000000 

1. 选择 器 的 命名 规则 

1) 只 能 由 字母 、 数 字 、 下 画 线 组 成 ， 不 能 有 其 他 任何 特殊 字符 。 

2) 开头 不 能 是 数字 ， 即 上 只 能 以 字母 、 下 画 线 开头 。 


2. 选择 器 的 优先 级 


1) 第 一 原则 “ 近 


在 Ud 内 层 ， 所 以 1 标签 选择 器 能 
2) 当 作用 在 同一 层 时 ， 可 以 根据 选择 器 优先 级 权重 进行 计算 。 

















上 





者 优 























履 亲 4 




















E”， 最 内 层 选择 器 永远 比 外 层 优先 。 例 如 :; div ul lji > div #ul,， li 
层 id 选择 器 。 





























标签 选择 器 优先 级 为 1，class 选择 器 优先 级 为 10，id 选择 器 优先 级 为 100。 例 如 : div 


#1li> div ul .i > divul li 





， 优 先 级 权 习 





依次 为 : 








1+100 > 1+1+10 > 1+1+1] 。 





3) 当 优 先 级 权重 完全 相同 时 ， 写 在 后 面 的 选择 器 会 覆盖 前 面 的 选择 器 。 例 如 : 


div li{ color:red; 


} 


div li{ color:blue; } /* 完全 相同 的 选择 器 ， 写 在 后 面 的 生效 将 








4) 除 以 上 原则 外 ，CSS 中 还 有 一 个 特殊 样式 规则 !important。 
limportant 的 作用 是 将 当前 CSS 语句 提升 到 最 高 权重 ， 即 可 以 尾 盖 任何 选择 器 的 CSS 语 








句 。 但 是 并 不 推荐 使 ) 














divlif 


color:red ”limportant ; /* 使 月 


} 


4 limportant, 




















内 为 它 会 使 你 的 页 面 难以 修改 调试 。 例 如 : 


上!important 会 将 此 行 语句 提升 到 最 高 权限 **/ 
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5.3 ”章节 案例 : CSS 选择 器 练习 








使 用 学 到 的 CSS 选择 器 知识 ， 实 现 图 5-3 所 示 的 商品 列表 展示 (部 分 CSS 相关 属 怕 
置 将 在 第 6 章 讲 解 ) 。 


























D 127.0.0.1:8020/H5-17 


G | Q 127.0.0.1:8020// 练 习 01-CSS 选 择 器 练习 .htm 


* 家 用 电器 
。 大 家 电 


。 洗衣 机 
。 电 冰 箱 


。 平板 电视 











图 5-3 商品 列表 展示 的 案例 效果 网 






























































【案例 代码 】 
<style type="text/css"> 
#div{ 
width: 200px; 
background-color: 本 cc; 
} 
#div li{ 
font-size: 12px; 
} 
#div .first{ 
font-size: 14px; 
color: #ff7300; 
font-weight: bold; 
} 
</style> 
<div id="div"> 
<ul> 
<li class="first"> 家 用 电器 </li> 
<li> 大 家 电 </li> 
<1i> 洗 衣 机 </li> 
<li> 电 冰箱 wWli> 
<l> 平 板 电视 </li> 
</ul> 
<ul> 
<li class="first"> 家 用 电器 </li> 
<li> 大 家 电 </li> 
<1i> 洗 衣 机 </li> 
<li> 电 冰箱 </1li> 
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<] 谊 平板 电视 </li> 





</ul> 
</div> 


【 章 书 练习 】 
































1. 列举 应 用 CSS 的 三 种 方式 。 
2. CSS 选择 器 包括 哪些 ?请 最 少 写 出 5 个 。 
3. 常见 的 伪 类 状态 有 到 、 hover、 a 
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j 的 CSS 属性 ， 本 章 是 学 习 CSS 环节 的 重点 ， 也 是 本 书 以 后 最 常 使 用 






































本 章 具 体 介 绍 实 
的 知识 点 。 
本 章 学 习 目标 : 
> 熟练 掌握 CSS 常用 的 文本 属 ! 
> 熟练 掌握 CSS 常用 的 背景 属性 
> 正确 使 ] 超 链接 相关 的 伪 类 选择 器 ， 
在 学 完 本 章 后 ， 读 者 可 以 熟练 使 用 各 种 CSS 属性 设置 ， 可 以 设置 网 页 的 字体 样式 、 段 
落 排版 和 网 页 背景 等 属性 ， 使 网 页 更 加 美观 。 


oa 





















































HH Lor 
2; 让 




























































































6.1 CSS 常用 文本 属性 


首先 介绍 CSS 的 文本 属性 ， 使 用 CSS 属性 不 仅 可 以 控制 文字 的 大 小 、 颜 色 和 字体 等 ， 
还 可 以 设置 整个 段落 的 行 高 、 对 齐 方 式 等 属性 ， 大 大 提高 网 页 的 可 读 性 。 


611 DUOUOO0OO0O0U0OD0D 
1. 字体 
(1) font-family: 字体 族 ， 设 置 字体 
可 以 同时 设置 多 个 字体 ， 多 个 字体 样式 间 用 去 号 分 隔 ， 浏 览 器 解析 时 ， 会 从 左 往 右 依 次 
查找 。 选 择 可 用 字体 ， 当 浏览 器 找 不 到 可 用 字体 时 ， 将 使 | es 
般 情 况 下 ， 前 面 使 用 具体 字体 名 称 ， 最 后 一 个 使 用 字体 族 类 名 称 。 表 6-1 是 常用 字体 
族 名 称 及 说 明 。 图 6-1 所 示 为 衬 线 体 与 非 衬 线 体 。 


表 6-1 常用 字体 族 名 称 及 说 明 
































































































































































































































字体 族 名 称 说 明 
衬 线 体 Serif 字体 在 末端 拥有 额外 的 装饰 
非 衬 线 体 Sans-serif( 常 用) 字体 在 末端 没有 额外 的 装饰 
等 宽 体 Monospace 所 有 字符 具有 相同 的 宽度 ， 等 宽 字 体 仅 针对 西 文字 体 
Sans-serif Serif Serif 
(red serifs) 


图 6-1 衬 线 体 与 非 衬 线 体 
70 
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基本 语法 如 下 : 


font-family:Arial, "Microsoft Yahei', sans-serif; 


(2) font-style: 设置 字体 样式 








通常 使 用 其 中 的 两 个 属性 值 ， 正 常 ormal) 和 和 斜体 (italic)。 



































基本 语法 如 下 : 


font-style: italic; 


(3) font: 缩写 形式 
font 的 缩写 形式 依次 为 font-style、font-weight、font-size/line-height、font-family， 分 别 是 


字体 样式 、 








字体 粗细 、 字 号 / 行 高 、 字 体 族 。 














1) 使 





在 使 用 font 属性 时 须 注意 以 下 问题 : 











时 必须 严格 按照 上 述 顺 序 。 









































2) 多 个 样式 之 间 用 空格 分 隔 ， 且 font-size/line-height 必须 作为 一 对 用 /分 隔 。 
3) font-size 和 font-family 必须 指定 ， 其 他 样式 不 指定 将 采用 默认 样式 显示 。 





















































基本 语法 如 下 : 





font:italic bold 75%/1.8 Microsoft Yahei', sans-serif; 


2. 字号 
(1) font-weight: 设置 字体 粗细 























可 选 属性 值 : bold 加 粗 、lighter 细 体 或 者 填写 100 一 900 的 数字 (其 中 400 为 正常 ，700 


为 加 粗 ) 。 


(2) font-size: 设置 字体 大 小 

属性 值 通常 为 **px 或 **9% (其 中 百分比 代表 浏览 器 默认 字体 大 小 的 百分比 ， 绝 大 部 分 浏 
览 器 默认 为 16px) 。 

3. 字体 颜色 

(1) color: 设置 字体 颜色 

属性 值 有 3 种 表达 方式 。 








1) 直 
2 
























































接 写 颜色 的 英文 名 字 : red、green、blue 等 。 
六 进 制 写法 : #EEFFFFF，# 后 每 位 可 选 值 为 数字 0~9 以 及 英文 的 a~f， 每 两 位 对 














Pedy 























示 一 种 颜色 ， 分 别 对 应 红 绿 蓝 的 比例 (最 党 用， 推荐 )。 


3) rgb 写法 : 








rgb(0~255,0~255,0~255) 
rgba(0 一 255,0 一 255,0 一 255,0 一 1) 第 4 位 数 表示 透明 度 ，0 表示 全 透明 ，1 表示 不 透明 。 


(2) o 




















pacity: 设置 透明 度 














属性 值 为 0~1 的 数字 。 





:土产 
六 忌 : 


元 素 透明 ， 


使 用 opacity 时 当前 元 素 以 及 子 元 素 均 会 透明 ; 而 使 用 rgba 调整 时 ， 只 会 使 当前 
不 会 改变 子 元 素 透明 度 。 
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代码 示例 如 下 : 


#div1{ 
人 # 使 用 





























rgba 设置 divl 背景 透明 ， 


则 divl 的 子 元 素 不 会 受 影响 */ 


/*background-color: reba(255,0,0,0.5);*/ 

















/* 使 用 opacity 设置 divl 透明 ， 则 divl 中 的 所 有 背景 、 文 字 、 子 元 素 均 会 透明 闻 


background-color: red; 
opacity: 0.5; 


6.1.2 00D0D0 
1. line-height 









































设置 行 高 ， 属 性 值 表达 方式 有 以 下 3 种 。 











1) 像素 单位 ， 如 48px。 
2) 纯 数 值 ， 表 示 正 常 行 高 的 倍数 。 
3) 百分数 ， 表 示 正 常 行 高 的 百分数 。 




























































































line-height 有 一 个 典型 应 用 ， 就 是 可 以 调整 元 素 中 文本 垂直 居中 ， 设 置 方式 为 让 控件 的 











height 等 于 控件 的 line-height。 
代码 示例 如 下 : 


height: 100px; 








line-height:100px; ”* 设置 行 高 等 于 高 


2. text-align 














设置 块 级 元 素 中 文字 的 水 平 对 齐 方式 ， 

















代码 示例 如 下 : 


<!IDOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.text_align1{ 
height: 30px; 
text-align:left; 
} 
.text_align2{ 
height: 30px; 
text-align:center; 
} 
.text_align3{ 
height: 30px; 
text-align:right; 
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度 ， 则 当前 元 素 中 文字 垂直 居中 半 








属性 值 有 left、center、right。 
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</style> 

</head> 

<body> 
<div class="text_align1"> 这 是 文字 居 左 对 齐 的 段落 <div> 
<div class="text_align2"> 这 是 文字 居中 的 段落 </div> 
<div class="text_align3"> 这 是 文字 居 右 对 齐 的 段落 </div> 

</body> 

</html> 











代码 运行 效果 如 图 6-2 所 示 。 








4 





站 02-text-align 文 字 水 后; 
CG |@O 127.0.0.1:8020/code/ 第 
点 击 这 里 导入 书签 。 开始 


这 是 文字 居 左 对 齐 的 段落 


这 是 文字 居中 的 段落 
这 是 文字 居 右 对 齐 的 段落 








图 6-2 ”文字 对 齐 方式 效果 


3. letter-spacing 

设置 字符 间距 ， 即 字 与 字 之 间 的 间距 ， 属 性 值 通常 为 **px。 

4. text-decoration 

文本 修饰 属 忻 ， 常 用 属性 值 有 四 个 ， 分 别 为 下 画 线 underline、 删 除 线 line-through、 上 画 
线 overline、 不 做 修饰 none。 
























































代码 示例 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.text_decoration1{ 
text-decoration: overline; 
} 
.text_decoration2{ 
text-decoration: line-through:; 
} 
.text_decoration3{ 
text-decoration: underline; 
} 
</style> 
</head> 
<body> 


<div class="text_decorationl"> 这 是 添加 上 画 线 的 文字 </div> 
<div class='"text_decoration2"> 这 是 添加 删除 线 的 文字 </div> 
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<div class="text_decoration3"> 这 是 添加 下 面 线 的 文字 </div> 
</body> 
</html> 





代码 运行 效果 如 图 6-3 所 示 。 














BH- -En 
GC |© 127.0.0.1 Vv bt=1504 六 


这 是 添加 上 画 线 的 文字 














图 6-3 文本 修饰 效果 





5. overflow (overflow-x 和 overflow-y) 

控制 超出 范围 文本 的 显示 方式 ， 常 用 属性 值 有 以 下 三 个 。 

1) auto: 根据 文字 多 少 自动 显示 滚动 条 。 

2) scroll: 始终 显示 滚动 条 。 

3) hidden: 超出 范围 文本 隐藏 ， 可 以 通过 overflow-x 和 overflow-y 分 别 设置 水 平 垂 直 
方向 的 隐藏 。 


注意 : 这 个 属性 已 经 在 第 4 章 中 进行 详细 讲解 ， 此 处 不 再 殉 述 。 





























6. text-overflow 

设置 多 余 文 字 的 显示 方式 ， 常 用 属性 值 有 两 个 。 
1) clip: 裁剪 文本 ; 

2) ellipsis: 使 用 省 略 号 代替 多 余 文 字 。 

7. white-space 

设置 元 素 内 的 空白 符 怎样 处 理 。 常 见 属性 值 如 下 : 
1) normal: 上 默认， 空白 会 被 浏览 器 忽 
2) nowrap: 设置 中 文 行 末 不 断 行 显示 。 

3) pre: 空白 会 被 浏览 器 保留 。 作 用 类 似 HTML 中 的 <pre> 标签 。 
【重点 】 如 何 让 每 行 多 余 文 字 显示 省 略 号 ? 

1) white-space: nowrap; 如 果 是 中 文 ， 需 设置 行 末 不 断 行 。 

2) overflow: hidden; 设置 控件 超出 范围 隐藏 。 

3) text-overflow: ellipsis; 设置 多 余 文 本 省 略 号 显示 。 

8. text-shadow 

文本 阴影 ， 有 4 个 属性 值 。 
1) 水 平 阴影 距离 : 必 写 ， 数 值 越 大 ， 阴 影 右 移 。 

2) 垂直 阴影 距离 ; 必 写 ， 数 值 越 大 ， 阴 影 下 移 。 

3) 阴影 模糊 距离 : 可 写 ， 数 值 越 大 ， 阴 影 越 模糊 。 默 认为 0， 不 模糊 。 
4) 阴影 颜色 : 可 写 ， 默 认为 黑色 。 



















































































Do 
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。 例 如 ， 将 上 述 阴 影 代 码 改 为 下 述 语句 ; 
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代码 示例 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 

<title>CSS 样式 表 </title> 

<style type="text/css"> 

.text_shadow{ 
text-shadow: Spx Spx 2px red; 


} 
</style> 
</head> 
<body> 
<h2 class="text_shadow"> 文 字 阴 影 </h2> 
</body> 
</html> 


代码 运行 效果 如 图 6-4 所 示 。 





文字 阴影 








图 6-4 文字 阴影 效果 
这 里 还 需要 补充 ， 文 本 阴影 可 以 同时 设置 多 个 阴影 ， 每 个 阴影 效果 之 间 以 去 号 分 隔 即 














.text_ shadow{ 
text-shadow: Spx 3pX 3px blue,-Spx -3px 3px Ted; 
} 


代码 运行 效果 如 图 6-5 所 示 。 











图 6-5 多 个 文字 阴影 效果 

9. text-indent 

首 行 缩 进 ， 可 以 使 用 像素 值 调整 段落 文字 的 首 行 缩 进 大 小 。 
代码 示例 如 下 : 


text-indent:32px; // 首 行 缩 进 32px， 默 认 字体 大 小 16px 的 情况 下 ， 将 首 行 缩 进 两 个 字 
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10. text-stroke 

0 需要 注意 的 是 text-stroke 只 能 在 webkit 内 核 浏览 器 中 使 用 ， 所 以 必须 
使 用 “-webkit-” 前 级 ， 共 接收 两 个 属性 值 分 别 为 描 边 的 粗细 ， 描 边 的 颜色 。 

代码 示例 如 i 


<IDOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.text_stroke{ 
-webkit-text-stroke: 2px yellow; 















































} 
</style> 
</head> 
<body> 
<h2 class="text_stroke"> 文 字 描 边 </h2> 
</body> 
</html> 





代码 运行 效果 如 图 6-6 所 示 。 











站 csst 式 雪 
@ | @ 127.0.0.1:8020/HelloWorld/Css3/ch05.html?_hbt=15045725 





图 6-6 “文字 描 边 效果 


52 CSS 常用 背景 属性 


网 页 可 以 用 颜色 当 背 景 ， 也 可 以 用 图 片 当 背 景 ， 选 择 合 适 的 颜色 或 背景 可 以 使 网 页 的 风 
格 趋 近 统一 ， 同 时 让 网 页 更 加 美观 。 


621 00O0000 
设置 网 页 背景 颜色 的 是 background-color， 其 属性 值 为 颜色 值 ， 表 达 方 式 与 字体 颜色 的 
三 种 设置 方法 相同 。 例 如 : 


background-color:red; 
background-color:#66CCFF:; 
background-color:RGBA(255,255,0,0.5); 
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1. background-image 
设置 背景 图 像 ， 背 景 图 和 背景 色 同 时 存在 时 ， 背 景 
76 
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background-repeat 信和 直 月 京 





基本 语法 如 下 : 





background-image: url( 图 


2. background-repeat 


当 


月 


【= 加 二 网 





久 | 


片 地 址 的 相对 路 径 ); 




















后 





1) no-repeat: 
2) repeat: 
3) repeat-x: 水 习 
4) repeat-y: 垂直 方向 


设置 朝 晤 加 


不 平 铺 。 
F 铺 默认 )。 
方向 


可 
































3. background-size 

























































































大 小 小 于 元 素 实 际 区 域 大 小 时 ， 








会 默认 将 背景 


人 





“铺展 示 。 





图 进 





怀 \ 





图 平 铺 方 式 。 可 选 属性 值 有 四 个 : 


























平 铺 。 
平 铺 。 















































可 以 使 用 

























































































































































































设置 背景 图 大 小 ， 可 以 分 为 两 种 方式 设置 。 

(1) 指定 宽度 和 高 度 

指定 宽 高 的 写法 也 分 为 两 种 ， 第 一 种 是 直接 写 带 像素 单位 的 数值 ;第 二 种 是 写 百 分 比 
〈 即 宽 高 为 父 容器 宽 高 的 百分比 )。 两 种 方式 都 有 两 个 属性 值 ， 第 一 个 属性 值 为 宽度 ， 第 二 个 
属性 值 为 高 度 。 

1) 当 只 有 一 个 属性 值 时 ， 默 认为 宽度 与 高 度 等 比 缩放 。 

2) 当 有 两 个 属性 值 时 ， 会 按照 指定 的 高 度 与 宽度 进行 压缩 或 拉 伸 显 示 

(2) 等 比 缩放 

等 比 缩放 也 有 两 种 方式 ， 分 别 是 contain 和 cover。 

1) contain: 图 片 等 比 缩放 ， 缩 放 到 宽 或 高 的 某 一 边 等 于 父 容器 的 宽 高 ， 另 一 边 按照 图 
片 大 小 缩放 《可 能 导致 部 分 区 域 无 法 覆盖 ) 。 

2) cover: 图 片 等 比 缩放 ， 使 背景 图 像 完 全 履 盖 背景 区 域 〈 可 能 导致 背景 图 部 分 区 域 无 
法 显示 ) 。 

4. background-position 

设置 背景 图 像 的 起 始 位 置 。 属 性 值 有 两 种 写法 ， 第 一 种 使 用 指定 位 置 关键 字 ;， 第 二 种 是 
使 用 数值 。 

1) 指定 位 置 关键 字 : 属性 值 有 left、right、top、bottom 和 center。 当 只 写 一 个 属性 值 
时 ， 另 一 个 默认 为 center。 


2) 使 用 数值 ， 两 个 值 ， 分 别 表 万 
在 使 用 人 
1) 当 只 











个 属性 值 时 ， 





























KR 水平 位 置 和 垂直 位 置 ， 























默认 为 水 平方 向 ， 垂 直 设 为 


于 


疝 








性 时 需要 注意 以 下 三 点 











居中 。 











2) 当 使 / 


注意 : 在 水 平方 向 上 ， 正 数 右 移 ， 





























未 图 片 的 左上 


也 





角 介 








以 概括 为 左 负 右 正 ， 上 负 下 正 。 





基本 语法 如 下 : 











/* 





图 片 相对 于 左上 








， 水 平方 向 右 移 SO0px， 垂 直方 向 上 移 50px */ 











background-position: SOpx -50px; 


E 各 个 方向 移动 的 实际 
负数 左 移 ; 在 坚 直 方向 上 ， 正 数 下 移 ， 


可 以 采用 像素 值 或 百分比 形式 。 














E 离 。 





负数 上 移 ， 可 
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3) 当 使 用 百分数 时 ， 一 般 只 能 是 正 数 。 百 分 数 表示 去 掉 图 片 的 大 小 后 ， 元 素 中 剩余 空 
离 的 分 布 比 例 。 
例如 ，background-position: 30%; 代表 水 平方 向 去 掉 图 片 的 宽度 后 ， 元 素 剩余 区 域 宽 度 


:7 显示 。 示 意图 如 图 6-7 所 示 。 





C | © 127.0.0.1:8020/HelloWorld/CSS3/ch05.html?_hbt=15045920... 会 | : 





图 6-7 图 像 定位 示意 图 














a ee 
景 图 的 定位 方式 。 属 性 值 有 三 个 : 

1 0 border-box: 从 边框 外 缘 开 始 。 
2) padding-box: 从 边框 内 缘 开 始 。 
3) content-box: 从 文字 内 容 区 开始 。 
background-origin 不 改变 背景 图 显示 区 域 大 小 ， 只 决定 左上 角 定位 位 置 。 
6. background-clip 
裁 切 背景 图 和 背景 色 显 示 区 域 。 其 属性 值 有 三 个 ; 
1) border-box: 从 边框 外 缘 开 始 显示 。 
2) padding-box: 从 边框 内 缘 开 始 显示 。 
3) content-box: 从 文字 内 容 区 开始 显 
不 在 显示 区 域 内 的 背景 图 或 背景 色 ， 会 被 裁 切 不 显示 。background-clip 不 改变 定位 位 
只 是 通过 裁 切 显示 部 分 区 域 。 
7 background-attachment 

设置 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 。 主 要 属性 值 有 两 个 : 
1) scroll: 默认 值 ， 背 景 图 像 会 随 着 页 面 其 余部 分 的 滚动 而 移动 。 
2) fixed: 当 页 面 的 其 余部 分 滚动 时 ， 背 景 图 像 不 会 随 之 移动 。 
8. background 

背景 的 简写 属性 ， 在 一 个 声明 中 设置 所 有 的 背景 属性 。 当 使 用 简写 属性 时 ， 属 性 值 的 顺 
下 所 示 : 


> background-color 























> background-image 

> background-repeat 

> background-attachment 
> background-position 


第 6 章 CSS 常用 属性 
基本 语法 如 下 : 


background: red url(‘img/img.jpg’) no-repeat scroll 20px -20px; 


注意 : 上 述 属 性 不 必 全 部 使 用 ， 可 以 按照 页 面 的 实际 需要 使 用 。 


6.3 ”CSS 其 他 常用 属性 


631 U0000D0 
list-style 规定 列表 的 样式 ， 即 每 个 列表 项 前 的 标志 。 常 用 属性 值 见 表 6-2。 























表 6-2 列表 样式 属性 





















































属性 值 方 ” 式 语法 实现 示 例 
none 无 样式 list-style:none; 刷牙 
disc 实心 圆 〈<ul> 默 认 类 型 ) list-style:none; @ 刷牙 
circle 室 心 贺 list-style:none; 〇 刷牙 

Square 实心 正方 形 list-style:none; 国 刷牙 

decimal 数字 <ol> 默认 类 型 ) list-style:none; 1. 刷牙 














除 以 上 方式 外 ， 还 可 以 直接 使 用 


而 











像 作 为 列表 的 标志 。 基 本 语法 如 下 : 





ulli {list-style-image : url(xxx.png);} 


632 UDUUUDO 

超 链 接 与 其 他 标签 相 比 有 些 特殊 ， 可 以 有 多 种 状态 ， 如 “未 访问 状态 ”“ 已 访问 状态 ” 
等 ， 而 用 于 表示 超 链接 不 同 状态 样式 的 选择 器 就 称 为 “ 伪 类 选择 器 ”。 

代码 示例 如 下 : 

















a:link {color:#FF0000;} 主 未 被 访问 的 链接 状 
a:visited {color:#00FFO0;} 此 已 被 访问 的 链接 冯 
a:hover {color:#FFOOFF:;} /#* 鼠标 指针 移动 到 链接 上 */ 
a:active {color:#0000FF:;} /# 正在 被 单 击 的 链接 六 














效果 如 图 6-8 和 图 6-9 所 示 。 


未 访问 状态 已 访问 状态 鼠标 移 上 状态 激活 选 示 状 态 


127.0.0.1:8020/HelloWorld/CSS3/ch05.html?_hbt=1504592062920# 








图 6-8 ”鼠标 移 上 状态 
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四 css 样式 表 


@ | © 127.0.0.1:8020/HelloWorld 
未 访问 状态 已 访问 状态 量 标 下 去 激活 选 定 状态 


127.0.0.1:8020/HelloWorld/CSS3/ch05.html?_hbt=1504592062920# 





图 6-9 激活 选 定 状 态 























当 为 链接 的 不 同 状 态 设 置 不 同样 式 时 ， 请 按照 如 下 次 序 ( 规 则 〉 使 用 : 
1) a:hover 必须 位 于 a:link 和 a:visited 之 后 。 
2) a:active 必须 位 于 ahover 之 后 。 

















6.4 


节 案 例 ， 实现 素材 图 片 效果 


章 
应 用 本 章 所 学 的 CSS 相关 属性 ， 使 用 图 6-10 所 示 的 素材 良 
position 实现 图 6-11 所 示 的 “联系 我 们 ”页 面 。 





























/| 
亚 
Se 








此 助 background- 



































图 6-10 图标 素材 图 片 图 6-11 案例 实现 效果 图 
【案例 代码 】 
<style type="text/css"> 
#div{ 
width: 300px; 


height: 250px; 
background-color: #19242C; 


} 
#div h2{ 
color: #E4F5F0; 
text-indent: 20px; 
} 
#div p{ 
background-image: url(img/ico.png); 
width: 20px; 


height: 20px; 
margin-left: 20px; 
white-space: nowrap; 
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color: #AEAFBO; 
text-indent: 25px; 


} 
#div .p2{ 

background-position: -20px Opx; 
} 
#div .p3{ 

background-position: -40px Opx; 
} 
#div .p4{ 

background-position: -60px Opx; 
} 
#div .pS { 

background-position: -80px Opx; 
} 

</style> 


<div id="div"> 
<h2> 联 系 我 们 </h2> 


<p class="p1"> 总 机 : 0535-6792861</p> 
<p class="p2"> 传 真 0535-6723239</p> 
<p class="p3"> 报 名 : 0535-6792861</p> 
<p class="p4"> 邮 箱 : jredu @jerei.com</p> 


<p class="p5"> 官 网 : www.jredu100.com</p> 
</div> 





【章节 练习 】 

1. 常见 的 font 属性 有 哪些 ? 最 少 列举 出 五 个 。 
2. 简 述 修改 透明 度 的 两 种 方式 及 区 别 。 
3 

4 
5 

6 
































如 何 让 每 行 多 余 文 字 显示 省 略 号 ? 

常见 的 设置 背景 图 像 属性 有 哪些 ? 最 少 列举 五 个 。 

如 何 去 掉 超 链接 下 画 线 ? 

超 链 接 的 4 种 状态 分 别 是 5 
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1U CSS3000000U00 


CSS3 是 CSS 的 升级 版 本 ， 也 是 目前 最 新 版 本 ， 新 增 了 许多 属性 及 选择 器 。 在 CSS3 中 


把 原 CSS 的 规范 分 









































割 为 一 些小 的 模块 ， 同 时 更 多 新 的 模块 也 被 加 入 进来 ， 本 章 介绍 几 个 常 








用 CSS3 模块 。 
本 章 学 习 目 标 : 
> 熟练 使 用 CSS3 的 过 渡 和 变换 属性 。 








> 掌握 CSS3 动画 的 声明 及 调用 。 
> 了 解 CSS3 新 增 的 属性 。 















































> 了 解 CSS3 新 增 的 各 类 选择 器 的 使 用 。 

















通过 本 章 的 学 习 




















出 














， 读 者 将 掌握 各 种 CSS3 新 增 的 属性 和 选择 器 ， 熟 练 使 用 这 些 新 增 的 属 














性 ， 可 以 增加 网 站 的 特效 与 动画 ， 使 网 站 变 得 更 加 炫 酷 。 


7.1 CSS3 的 过 渡 与 变换 








更 加 动感 ， 提 供 更 


时 性 transition 《天 


eh 








7.1.1 _ transitionb] 





在 CSS3 未 出 现 之 前 ， 如 果 希 望 标签 元 素 实现 从 一 种 样式 转变 为 另 一 种 样式 ， 使 网 页 显 








好 的 客户 体验 ， 则 需要 借助 Flash 或 者 JavaScript， 而 CSS3 新 出 现 的 两 
过 渡 ) 与 transform 《变换 ) 可 以 轻松 实现 效果 。 


UUDUD 














CSS 的 transition 允 许 CSS 的 属性 值 在 一 定 的 时 间 区 间 内 平滑 地 过 渡 。 这 种 效果 可 以 在 鼠 
































标 单 击 、 获 得 焦点 、 





被 单 击 或 对 元 素 任何 改变 中 触发 ， 并 圆滑 地 以 动画 效果 改变 CSS 的 属 
































性 值 。transition 属性 






































kk 体 可 分 为 以 下 四 个 子 属 性 ， 见 表 7-1。 











表 7-1 transition 属性 的 子 属性 列表 






































属性 名 介 绍 属 性 值 
transition-delay 过 渡 开始 前 的 延迟 时 间 默认 值 是 0， 以 秒 或 毫秒 为 单位 ， 可 以 省 略 
transition-duration 过 渡 开 始 到 过 渡 完 成 的 时 间 默认 值 是 0， 意 味 着 不 会 有 效果 ， 以 秒 或 毫秒 为 单位 
transition-property 参与 过 渡 的 属性 可 以 单独 指定 某 个 CSS 属性 ， 也 可 以 写 all/none 
in 过 渡 的 样式 函数 es 、ease、ease-in、ease-out、ease-in-out， 默 认 值 是 


常用 的 写法 是 简 




















1 





写 属性 transition， 可 以 直接 在 这 一 个 属 











生 中 设置 其 他 四 个 属性 ， 属 性 值 



































el 
ji 














的 顺序 一 般 为 property、duration、timing-function、delay。 

















基本 语法 如 下 : 
transition: all 
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示例 代码 的 含义 是 : 执行 元 素 所 有 属性 的 过 渡 效 果 ， 过 渡 时 间 为 0.3s， 过 渡 速 度 是 逐渐 
变 慢 ， 并 且 在 触发 过 渡 效 果 后 延迟 2s 执行 过 渡 效 果 。 

transition-timing-function 是 指 过 渡 效 果 的 运行 速度 ， 以 下 是 可 以 选择 的 值 : 

1) ease: 《逐渐 变 慢 ) 默认 值 。 

2) linear: 《匀速 )。 

3) ease-in: (加速 )。 

4) ease-out: (减速 )。 

5) ease-in-out: 《加 速 然后 减速 )。 

下 面 看 一 个 完整 示例 : 


<IDOCTYPE html> 








































































































<html> 
<head> 
<style type="text/css"> 
#testTransition{ 
width: 100px; 
height: 20px; 
background-color: blue; 
必 宽度 属性 过 渡 效 果 ， 过 渡 时 长 23， 延 时 0.2s 开始 执行 六 
transition:width 2s .2s; 
-moz-transition:width 2s .2s; /# 莱 容 Firefox 浏览 器 ， Re oy 
-webkit-transition:width 2s .2s; /# 兼 容 Safari 浏览 
} 
#testTransition:hover{ 
width: 200px; 
} 
</style> 
</head> 
<body> 
<div id="testTransition"> 
</div> 
</body> 
</html> 




















执行 代码 以 后 ， 过 渡 前 的 宽度 具体 效果 如 图 7-1 所 示 。 
鼠标 移 到 <div> 标 签 上 0.2s 后 ， 执 行 过 渡 效 果 如 图 7-2 所 示 ， 有 2s 的 过 渡 效 果 。 
































GC 合 |@ 127.0.0.1:8020/HelloWorldlyinde C 合 |@ 127.0.0.1:8020/HelloWorld1/index.htm 
[| 
ess 
图 7-1 过 渡 前 的 宽度 图 7-2 过渡 后 的 宽度 





当 鼠 标 移 出 后 ， 也 会 有 过 渡 效 果 恢 复 到 初始 状态 。 
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注意 : 浏览 器 兼 
级 ， 


写 代 码 时 增加 前 





前 的 数字 为 文 持 该 前 多 


属性 © 
transition 26.0 
4.0 -webkit- 
transition-delay 26.0 
4.0 -webkit- 
transition-duration 26.0 
4.0 -webkit- 
transition-property 26.0 
4.0 -webkit- 
transition-timing-function 26.0 
4.0 -webkit- 


7.1.2 transform 
通过 使 用 变换 属 





变换 与 3D 变换 ， 通 常 


常见 的 变换 属性 





兼容 性 ， 为 了 解决 CSS 代码 不 能 够 被 某 些 浏览 器 支持 的 问题 ， 需 要 在 编 
来 让 浏览 器 识别 ， 有 具体 如 图 7-3 所 示 。 


在 图 7-3 中 ， 数 字 表 示 文 持 该 


级 属性 的 第 一 











10.0 16.0 

40 -moz- 1 
10.0 16.0 

4.0 -moz- 3.1 
10.0 16.0 

40 -moz- 3 
10.0 16.0 

4.0 -moz- 3.1 
10.0 16.0 

#4.0 -moz- s 


SS 





图 7-3 浏览 器 兼容 性 前 绥 


UUDUD 























有 两 个 : 
































1) transform: 定义 元 素 向 2D 或 3D 变换 。 


2) orion oa: 改变 转换 元 素 的 位 置 。 











下 面具 体 介 


1. transform 


























transform 的 属性 





这 两 个 属性 。 
































表 7-2 常见 的 transform 属性 值 




















©@ 


6.1 
-webkit- 


6.1 


-webkit- 


6.1 


-webkit- 


6.1 


-webkit- 


6.1 


-webkit- 








效果 。 


时 性 的 第 一 个 浏览 器 版 本 号 。 紧 跟 在 -webkit-、-moz-、-0- 
浏览 器 版 本 号 。 此 前 级 也 适用 于 其 他 CSS 属性 。 








O 


12.1 
10.5 -o- 


12.1 
10.5 -o- 


12.1 
10.5 -o- 


12.1 
10.5 -o- 


P| 
10.5 -o- 


性 可 以 对 元 素 进 行 旋转 、 拉 伸 、 翻 转 、 缩 放 等 操作 。 变 换 属 性 分 为 2D 
与 过 渡 属 性 搭配 使 用 ， 来 完成 一 些 简 单 的 动画 








值 有 很 多 ， 由 于 篇 幅 限 制 ， 在 此 仅 列 出 常见 的 属性 值 ， 详 见 表 7-2。 






























































属性 值 作 
none 元 素 不 进行 变换 
translate(x,y) 定义 2D 平移 变换 
translate3d(x,y) 定义 3D 变换 
translateX(x) 定义 沿 X 轴 平 移 变 换 ， 立 轴 与 乙 轴 同 理 
scale(x,y) 定义 2D 缩放 变换 
scale3d(x,y,z) 定义 3D 缩放 变换 
scaleX(x) 通过 设置 X 轴 的 值 来 进行 缩放 ，Y 轴 与 Z 轴 同 理 
rotate(angle) 定义 2D 旋转 ， 角 度 值 后 需 跟 角 度 单位 deg 


























skew(x-angle,y-angle) 
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定义 沿 着 X 轴 和 立轴 的 2D 倾斜 转换 
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代码 示例 如 下 : 


.divl{ 
width: 200px; 
height: 80px; 
background-color: red; 
transform: translate(SOpx,80px); 
} 
.div2{ 


transform: rotate(45deg); 


} 
.div3{ 


transform: scale(2); 
} 
<div class="div1"> 图 形变 换 </div> 
<div class="div2"> 图 形 旋 转 </div> 
<div class="div3"> 图 形 缩放 </div> 








代码 运行 实现 效果 如 图 7-4 所 示 。 














图 7-4 变换 示例 效果 图 


2. transform-origin 

transform-origin 设置 旋转 元 素 的 基点 位 置 ，2D 转换 元 素 可 以 改变 元 素 的 X 轴 和 Y 轴 ; 
对 于 3D 转换 元 素 还 可 以 更 改元 素 的 乙 轴 。 

transform-origin 的 属性 值 有 三 个 : 

1) x-axis， 可 以 使 用 的 值 有 : left、right、center、**px、 百 分 比 。 

2) y-axis， 可 以 使 用 的 值 有 : left、right、center、**px、 百 分 比 。 

3) z-axis， 可 以 使 用 的 值 有 : **px。 

完整 测试 代码 如 下 : 


<IDOCTYPE html> 
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<html> 
<head> 
<style type="text/css"> 
#testTransform{ 
width: 200px; 


height: 100px; 

background-color: red; 

transform: rotate(30deg); 

transform-origin: 0 0:/* 变 换 基 点 到 左上 角 位 置 ,不 加 此 行 代码 效果 如 图 7-5 所 
示 ， 加 此 行 代码 效果 如 图 7-6 所 示 ， 读 者 可 自行 尝试 注释 此 行 代码 ， 来 确认 效果 */ 









































} 
</style> 
</head> 
<body style="padding-left: 200px; padding-top: 200px;"> 
<div 1d="flagPos"> 
<div id="testTransform"> </div> 
</div> 
</body> 
</html> 


正常 变换 ， 不 更 改 基点 的 位 置 效 果 如 图 7-5 所 示 。 
变换 基点 后 ， 效 果 如 图 7-6 所 示 。 










































































图 7-5 变换 基点 前 的 效果 图 7-6 变换 基点 后 的 效果 


7.2 ”CSS3 动画 















































CSS3 动画 是 指使 用 CSS 代码 让 网 页 中 的 元 素 运 动 起 来 形成 的 动画 。CSS3 的 动画 功能 
可 以 在 许多 网 页 中 取代 动画 图 片 、Flash 动画 以 及 JavaScript 动画 等 ， 使 网 页 变 得 更 加 炫丽 
丰富 。 
7.2.1 CSS30 0 0 @keyframes[] animation 

7.1 节 讲 到 的 过 渡 和 变换 其 实 也 是 一 种 动画 ， 只 是 动 了 一 次 的 动画 ， 而 动画 属性 可 以 看 
成 是 多 次 过 渡 和 变换 的 组 合 ， 同 时 可 以 设置 播放 次 数 ， 具 有 控制 播放 和 和 暂停 等 功能 。 
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第 7 章 


1. 使 用 @keyframes 创建 关键 帧 动画 





@keyframes 用 于 创建 动画 。 在 @keyframes 中 设置 CSS 样式 ， 就 能 创建 由 当前 样式 























渐 改 为 新 样式 的 动画 效果 。 
基本 语法 如 下 : 


@keyframes 动画 名 称 { 
阶段 1{CSS 样式 } 
阶段 2{CSS 样式 } 
阶段 3{CSS 样式 } 









































} 
动画 中 阶段 的 写法 有 两 种 方式 ; 























CSS3 新 增 属性 与 选择 器 





1) 每 个 阶段 用 百分比 表示 ， 从 0% 到 100% (起 止 必须 设置 ， 即 0% 和 100%)。 












































2) 使 用 from 和 to 表示 从 某 阶段 到 某 阶段 。 
代码 示例 如 下 : 





<style type="text/css"> 
/* 使 用 0% 到 100% 表 示 《〈 起 止 必须 设置 ， 即 0% 和 100%》*/ 
@keyframes myFramel{ 
0%{ 
top: OpxX; 
































} 
30%1{ 
top: SOpx; 
} 
100%{ 
top: 100px; 
} 
} 
放 使 用 from-to 直接 表示 开始 结尾 ， 样 式 会 匀速 变化 */ 
@keyframes myFrame2{ 











from{ 
top:O0px; 
} 
to{ 
top: 100px; 
} 
} 


</style> 


2. 使 用 animation 调用 关键 帧 动画 
创建 好 一 个 动画 后 ， 需 要 在 CSS 选择 器 中 使 用 animation 动画 



























































帧 动画 。 动 画 属性 中 必须 有 动画 名 称 和 时 长 ， 和 否则 动画 不 生效 (关于 animation 的 详细 使 用 将 












































在 7.2.2 节 讲解 )。 
基本 语法 如 下 : 
































属性 ， 调 用 声明 好 的 关键 
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div{ 


/x* 让 div 调 




















animation: myFramel $s; 


7.2.2 CSS3animation 中 DDO 


animation 又 包含 了 入 


上 述 章节 提 到 ， 声 明 好 关键 帧 动画 以 后 ， 














1. animation 


除 animation-play-state 之 外 的 所 有 








之 间 
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用 空格 分 隔 。 
2. 








3: 














animation-name 
规定 @keyframes 动画 的 名 称 。 




















animation-duration 


多 的 子 








遇 性 可 以 对 动画 的 播放 进行 设置 。 





























动画 


















































4. 





animation-tim 











规定 完成 一 个 动画 所 需 的 秒 或 毫秒 ， 
ing-function 








规定 动画 的 速度 曲线 。 


忆 





动画 属性 的 简写 局 











弟 用 忆 


鸟 


























1) linear: 动画 从 头 到 尾 的 速度 是 村 











2) ease: 默认 








和 下， 动画 以 


























S. animation-delay 


规定 动画 何 时 玫 





画 以 匀速 














F 始 ， 默 认 是 0。 


6. animation-iteration-count 








规定 动画 被 揪 











7. animation-direction 


规定 动画 在 下 一 次 循环 中 是 否 轮 流 反 问 播 放 。 
1) normal: 默认 值 ， 动 画 正 常 揪 
2) alternate: 动画 轮流 反 向 择 


放 的 次 数 ， 默 认 是 1。 

















放 。 

















8. animation-play-state 















































规定 动画 是 否 正 在 运行 或 暂停 。 其 
1) paused: 设置 动画 暂停 。 
2) running: 设置 动画 正在 播放 。 




















9. animation-fill-mode 





规定 对 象 动画 时 间 之 外 

















1) none: 不 改变 默认 行 


sz 
EE 











放 。 





时 
疝 


氏 速 开始 ， 然 











和 二 太 - 
的 大 态 。 











常 ] 




















2) forwards: 停留 在 动 


3) backwards: 














停留 在 动 























结束 状态 。 
画 开始 状态 。 





如 








使 月 








默认 是 0。 


性 值 有 以 下 五 个 。 
日 同 的 。 


可 以 在 选择 器 中 使 ) 





] myFramel 这 个 关键 帧 动画 ，5s 完成 所 有 动画 效果 **/ 



































导 
疝 











性 的 具体 介 



































台 到 低速 结束 。 
于 始 和 结束 。 

















sz 
EE 
[E: 


性 值 有 两 个 。 








0 

















生 值 也 有 两 个 。 


生 值 有 三 个 。 





后 加 快 ， 在 结束 前 开始 变 慢 。 
3) ease-in: 动画 以 低速 开始 ， 然 后 逐渐 加 快 至 匀速 直到 结束 。 
4) ease-out: 动 
5) ease-in-out: 动画 以 低速 


有 infinite 表示 无 限 次 播放 。 


animation 调用 


. 


如 下 : 


而 


性 ， 可 以 设置 多 个 动画 ， 每 个 动画 


第 7 章 CSS3 新 增 属性 与 选择 


注意 : 通过 修改 动画 的 属性 来 设置 动画 的 播放 效果 的 方式 有 两 种 。 
> 可 以 通过 设置 单个 属性 的 属性 值 进行 修改 。 
> 使 用 animation 的 缩写 形式 设置 ， 属 性 值 的 添加 顺序 按照 以 上 属性 的 介绍 顺序 。 


代码 示例 如 下 : 


<IDOCTYPE html> 

























































































<html> 
<head> 
<style type="text/css"> 
div{ 
width:100px; 
height: 100px; 
background-color: red; 
} 
必 通过 设置 单个 属性 的 属性 值 进行 修改 */ 
#div1{ 
animation-name: frame1;/* 调 用 关键 帧 名 称 */ 
animation-duration:3s:/* 关 键 帧 执行 时 间 交 
animation-timing-function:ease;/* 使 用 ease 效果 渐变 */ 
animation-iteration-count:infinite;/* 动 画 播放 无 限 次 */ 
} 
翌 使 用 animation 的 缩写 形式 进行 设置 */ 
#div2{ 
animation: framel 3s ease infinite;/# 动 画 与 divl 所 述 完 全 相同 */ 
} 
@keyframes framel{ 
from{ 
width: 100px; 
} 
to{ 
width: 200px; 
} 
} 
</style> 
</head> 
<body> 
<div id="div1"> 
这 是 一 个 div1 
</div> 
<div id="div2"> 
这 是 一 个 div2 
</div> 
</body> 
</html> 


89 


缀 


区 
pr 


Web 前 端 学 习 笔 记 : HTML5+CSS3+JavaScript 


73 CSS3 其 他 常用 属性 


除了 过 渡 、 变 换 和 动画 之 外 ，CSS3 还 提供 了 很 多 的 新 
网 页 开发 过 程 中 非常 常用 的 属性 ， 但 是 合理 地 使 用 这 些 属 怕 


















































首 必 性。 这些 属性 并 不 一 定 是 在 















































次 ， 给 人 一 种 视觉 震撼 的 感觉 。 


7.3.1 C99530 0UD0D 








E， 一 定 可 以 让 网 站 变 得 更 有 档 


CSS 的 渐变 效果 可 以 在 两 个 及 以 上 指定 的 颜色 之 间 显 示 平 稳 地 过 渡 。 过 去 可 能 使 用 图 像 








才能 实现 这 些 效果 ， 但 现在 通过 使 用 CSS3 的 渐变 就 可 以 轻松 完成 。 此 外 ， 拥 




















元 素 在 放大 时 看 起 来 效果 更 好 ， 这 是 由 浏览 器 生成 的 。 
渐变 包括 线性 渐变 和 径 向 渐变 ， 有 四 个 属性 可 以 设置 : 
1) linear-gradient， 用 线性 渐变 创建 图 像 。 
2) radial-gradient: 用 径 问 渐变 创建 图 像 。 
3) repeating-linear-gradient: 用 重复 的 线性 渐变 创建 图 像 
4) repeating-radial-gradient: 用 重复 的 径 向 渐变 创建 图 像 
1. 线性 渐变 的 属性 值 



















































































有 渐变 效果 的 

















o 


o 











1) point: 设置 渐变 的 起 始 位 置 ， 可 以 使 用 的 值 有 left、right、top、bottom 以 及 角度 












































值 ， 在 不 同 浏览 器 内 核 中 属性 值 的 写法 有 所 不 同 ， 有 具体 写法 参考 下 面 的 基本 语法 。 


| 























2) color-stop: 设置 渐变 的 起 始 颜 色 ， 可 以 写 多 个 。 
3) color-stop: 设置 渐变 的 终点 颜色 。 
基本 语法 如 下 : 


div{ 









































background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); 


background: -webkit-linear-gradient(left, red, blue); 
background: -0o-linear-gradient(left, red, blue); 
background: -moz-linear-gradient(left, red, blue); 
background: -ms-linear-gradient(right, red, blue); 
background: linear-gradient(to right, red , blue); 


} 
代码 示例 如 下 : 


<style> 
#gradl { 
height: 200px; 


访 Webkit 引擎 老式 语法 


访 Webkit 引擎 新 式 语法 





Ex 





Ek/ 





/Presto 引擎 的 线性 渐变 语法 六 





/#* Gecko 引擎 的 渐变 语法 */ 





/xTrident 引擎 的 线性 渐变 语法 六 














上 访 W3C 标准 语法 */ 














background: linear-gradient(to bottom, red, blue); ”/* 线 性 渐变 语句 */ 
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} 

</style> 

<body> 


<div 1d="grad1"></div> 
</body> 





代码 运行 效果 如 图 7-7 所 示 。 




















图 7-7 线性 渐变 


2， 径 向 渐变 的 属性 值 





基本 语法 如 下 : 
div{ 
background: radial-gradient(red, green, blue); 
} 
其 他 浏览 器 内 核 的 写法 与 线性 渐变 相同 ， 此 处 不 再 一 一 列举 。 径 向 渐变 的 








六 











属性 值 要 比 线 

生 渐 变 的 属性 值 复杂 得 多 ， 下 面 进行 简单 介绍 。 
1) position: 设置 渐变 的 圆心 位 置 ， 可 取 的 值 有 left、right、top、bottom、center， 还 有 
与 百分数 〈 可 以 为 负 值 )。 

2) shape: 用 于 定义 渐变 的 形状 ，circle 是 圆 形 渐变 ，ellipse 是 椭圆 形 渐 变 。 

3) size: 主要 用 来 确定 径 向 渐变 的 结束 形状 大 小 ， 可 取 的 值 有 closest-side 、closest- 
corner、farthest-side、farthest-corner， 默 认为 farthest-corner。 
4) color-stop: 设置 渐变 的 终止 颜色 。 
代码 示例 如 下 : 









































re 








数 


Me 



















































































<style> 
#gradl { 
width: 200px; 
height: 200px; 
background: radial-gradient(red, green, blue); “从 * 径 向 渐变 语句 */ 
} 
</style> 
<body> 
<div 1d="grad1"></div> 
</body> 
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代码 运行 效果 如 图 7-8 所 示 。 











图 7-8 径 向 渐变 


7.3.2 CSS30D0O0ODO 


通过 使 用 CSS3 的 多 列 属性 可 以 将 文本 内 容 分 成 多 列 ， 就 像 报 纸 一 样 的 布局 。 接 下 来 学 
习 常 见 的 儿 个 多 列 属性 。 

1. columns 

列 的 宽度 与 列 数 的 简写 属性 。 

2. column-count 

规定 元 素 被 分 隔 的 列 数 。 属 性 值 可 以 设 为 auto， 由 其 他 属性 决定 列 数 ， 如 column- 
width， 或 自 定 义 列 数 。 

3. column-width 

规定 每 个 列 的 宽度 。 属 性 值 可 以 为 带 像 素 单位 的 数值 或 auto。 

4. column-rule 

设置 每 个 列 之 间 边 框 的 宽度 、 样 式 和 颜色 ， 为 简写 属性 。 

5. column-rule-width 

规定 两 列 间 边框 的 宽度 。 可 选 属性 值 有 四 个 ， 分 别 为 thin〔( 细 边框 )、medium〔 中 等 边 
框 )、thick( 粗 边框 )， 还 有 自 定义 边框 宽度 **px。 

6. column-rule-style 

规定 两 列 间 边 框 的 样式 。 常 见 属 性 值 有 六 个 ， 分 别 为 none 〈 无 样式 )、hidden 〈 隐 藏 样 
式 )、dotted 点 状 线 )、dashed (虚线 )、solid( 实 线 )、double( 双 线 )。 

7. column-rule-color 

规定 两 列 间 边 框 的 颜色 。 

8. column-gap 

设置 每 个 列 之 间 的 距离 。 属 性 值 可 设 为 normal (W3C 建议 的 值 是 lem) 或 带 像 素 单位 
的 数值 。 

下 面 是 一 个 简单 的 示例 : 










































































































































































<style> 
.column { 
column-count: 3; 
column-rule: dotted Spx red; 
} 
</style> 
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<body> 


<div class="column"> 品 牌 故 奸 




















的 桥梁 。 


面 的 技术 培训 。 同 时 针对 在 校 成 绩优 蜡 、 动 习 
经 过 了 多 年 艰苦 创业 和 精神 耕耘 ， 已 与 国内 数 所 高 校 、 
育 科技 有 限 公 司 〈 简 称 杰 瑞 教 育 )， 


前 ， 已 成 为 知名 IT 教育 机 


站 





2011 








训 、IT 人 才 选 拔 推荐 业务 。 
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事 主要 开展 Java、iOS、Android、H5、PHP、 大 数据 、VR 方 
能力 强 的 学 生 ， 直 接 提供 就 业 辅 导 服 务 ， 充 当 企业 与 学 生 中 间 
IT 企业 建立 良好 的 合作 关系 。 烟 台 杰 瑞 教 











年 以 来 ， 








直 致 力 于 为 IT 企业 提供 助力 ， 培 养 后 备 力量 。 
L 构 及 优秀 人 才 资 源 提供 商 。 杰 瑞 教 育 依托 捷 瑞 数字 的 强大 企业 背景 ， 专 注 教育 


























A 
Fz 
- 口 












































</div> 
</body> 
代码 运行 效果 如 图 7-9 所 示 。 
| ST -°° ED 
] CS53 新 竺 性 x 得 
| C © 127.00.1 从 
| 
品牌 故事 主要 开展 Java、 。 的 桥梁 经 过 了 多 年 艰苦 。 提 供 助力 ， 培 养 后 备 力 
ios .Android、H5、PHP、: 创业 和 精神 持 杯 ,已 与 国内 : 最。 目前 ， 已 成 为 知名 IT 
大 数据 、VR 方 面 的 技术 培 ， 数 所 高 校 、[T 企 业 建立 良 。 教 育 机 构 及 优秀 人 才 资 源 
训 。 同 时 针对 在 校 成 绩优 。 好 的 合作 关系 。 烟台 杰 瑞 提供 商 。 杰 瑞 教 育 依托 扼 
‖ 异 、 动 手 能 力 强 的 学 生 ，“ 教育 科技 有 限 公司 ( 简称 。 瑞 数 字 的 强大 企业 背景 ， 
‖ 直接 提供 就 业 辅导 服务 ，“ 杰 瑞 教育 ) ， 自 2011 年 以 ， 专注 教育 培训 、IT 人 才 选 
| 充当 企业 与 学 生 中 间 “ 来 ， 一 下 致力 于 为 IT 企业 ， 拔 推荐 业务 ， 
图 7-9 多 列 属性 
wa 1 用 双 口 旺 
7.4 CSS3 新 增 选择 器 
CSS3 除了 新 增 很 多 的 属性 之 外 ， 还 新 增 了 一 系列 的 选择 器 。 这 些 选择 器 可 能 不 是 必须 
使 用 的 ， 但 是 熟练 地 使 用 这 些 选 择 器 ， 可 以 少 写 很 多 的 class 名 称 以 及 id 名 称 ， 极 大 地 提高 
了 代码 整洁 度 。 
7.4.1 00000 
二 

















\ 主 


] 量 







































































限制 ， 表 7-3 仅 列 出 周 





生 ， 这 样 做 可 以 减少 文档 内 对 class 


辕 性 选择 器 是 针对 元 素 属 性 进行 选择 的 。 利 用 DOM (文档 对 象 模 型 ) 实 现 元 素 过 滤 ， 
过 DOM 的 相互 关系 来 匹配 特定 的 元 素 属 ! 
性 的 定义 ， 使 得 文档 更 加 简洁 。 由 于 篇 幅 


二 
可 


已 
时 





性 和 id 属 
性 选择 器 ， 感 兴趣 的 读 








二 
可 


已 
疝 





分 



























































者 可 以 查阅 帮助 文档 了 解 具体 内 容 。 
表 7-3 部 分 属性 选择 器 
选 择 器 说 ” 明 

El[att] 选择 具有 att 属性 的 巨 元 素 

Ef[att="val"] 选择 具有 att 属性 且 属 性 值 等 于 val 的 EE 元 素 

Ef[att^="val"] 选择 具有 att 属性 且 属 性 值 为 以 val 开头 的 字符 串 的 王 元 素 
El[att$="val"] 选择 具有 att 属性 且 属 性 值 为 以 val 结尾 的 字符 串 的 EE 元 素 
Ef[att*="val"] 选择 具有 att 属性 且 属 性 值 为 包含 val 的 字符 串 的 EE 元 素 

代码 示例 如 下 : 


<IDOCTYPE html> 
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<html> 
<head> 
<style type="text/css"> 
#div pltitle]{ ”x* 选 择 具有 title 属性 的 p 元 素 。*/ 
color: blue; 
} 
#div option[selected="selected"]{ 
此 选择 具有 selected 属性 且 属 性 值 等 于 selected 的 option 元 素 。*/ 
color: white; 
} 
#div option[selected^="sel"]{ 
/# 选 择 具 有 selected 属性 且 属 性 值 为 以 sel 开头 的 字符 串 的 option 元 素 。*/ 
background-color: pink; 
} 
#div option[disabled$="led"]{ 
人 # 选 择 具 有 disabled 属性 且 属 性 值 为 以 led 结尾 的 字符 串 的 option 元 素 。%Y/ 
background-color: greenyellow ; 
} 
#div option[disabled*="ed"]{ 
选择 具有 disabled 属性 且 属 性 值 包含 ed 结尾 的 字符 串 的 option 元 素 。 交 
font-weight: bold; 
} 
</style> 
</head> 
<body> 
<div id="div"> 
<p title="study"> 前 端 学 习 </p> 
<select name="kuangjia"> 
<option> 框 架 </option> 
<option selected="selected">Bootstrap</option> 
<option disabled="disabled">JQuery</option> 
<option> AngularJS </option> 
</select> 
</div> 
</body> 
</html> 





» 





代码 运行 效果 如 图 7-10 所 示 。 








AngularJS 








图 7-10 ”属性 选择 器 
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742 UU00000D0 
结构 伪 类 选择 器 利用 DOM 实现 元 素 过 滤 ， 通 过 DOM 的 相互 关系 来 匹配 特定 的 元 素 ， 
这 样 做 可 以 减少 文档 内 对 class 属性 和 id 属性 的 定义 ， 使 得 文档 更 加 简洁 。 由 于 篇 幅 限 人 















































一 司 
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pf 







































































表 7-4 仪 列 出 部 分 结构 伪 类 选择 器 ， 感 兴趣 的 读者 可 以 查阅 帮助 文档 了 解 具 体内 容 。 
表 7-4 部 分 结构 伪 类 选择 器 
选 择 器 说 明 
E:nth-child(n) 匹配 父 元 素 的 第 n 个 子 元 素 E 
E:first-of-type 匹配 同类 型 中 的 第 一 个 同 级 兄弟 元 素 E 
E:only-child 匹配 父 元 素 仅 有 的 一 个 子 元 素 卫 
E:empty 匹配 没有 任何 子 元 素 〈 包 括 text 节点 ) 的 元 素 卫 

















代码 示例 如 下 : 


<IDOCTYPE html> 









































<html> 
<head> 
<style type="text/css"> 
pi:nth-child(2){ 
作 选 中 父 元 素 中 的 第 二 个 子 元 素 p*/ 
font-weight: bold;/* 加 粗 头 
} 
p:first-of-type{ 
人 # 选 中 父 元 素 中 第 一 个 同类 型 子 元 素 六 
font-style: italic:/* 倾 斜 光 
} 
a:only-child{ 
人 * 选 中 父 元 素 仅 有 的 子 元 素 a*/ 
text-decoration: underline;/* 下面 线 */ 
} 
p:empty{ 
人 * 选 中 没有 任何 子 元 素 的 p 标签 */ 
height: 20px; 
width: 200px; 
background-color: yellow; 
} 
</style> 
</head> 
<body> 
<div> 
<p> 第 一 个 p 标签 </p> 





A es 


<p> 第 二 个 p 标签 </p> 

<p></p> ”<!-- 没 有 子 元 素 的 p 标签 --> 
</div> 
<div> 
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<a> 父 元 素 中 仅 有 子 元 素 的 a</a> 
</div> 
</body> 
</html> 





代码 运行 效果 如 图 7-11 所 示 。 











让 1270012020HSR x 门 12700160201HSWIT X mM 127.00.1:80 
C ©12700.1 


拓 一 人 p 款 等 
第 二 个 p 标 签 
= 


又 有 子 元 素 人 0 








图 7-11 结构 伪 类 选择 器 





743 U000000 


状态 伪 类 选择 器 也 叫 UI 状态 伪 类 选择 器 ， 常 用 于 表单 空间 ， 如 选中 页 面 中 被 禁用 的 输 
入 框 、 选 中 页 面 中 被 选中 的 复 选 框 等 功能 。 常 见 的 UI 状态 伪 类 选择 器 见 表 7-5。 




















表 7-5 常见 的 UI 状态 伪 类 选择 器 











































































































E:enabled 匹配 用 户 界面 上 处 于 可 用 状态 的 元 素 卫 
E:disabled 还 配 用 户 界面 上 处 于 禁用 状态 的 元 素 E 
E:checked 匹配 用 户 界面 上 处 于 选中 状态 的 元 素 卫 
代码 示例 如 下 : 
<IDOCTYPE html> 
<html> 
<head> 


<style type="text/css"> 
input:enabled{ ”/* 选 中 可 以 操作 的 input*/ 
font-weight: bold; 
height: 30px; 





} 

input:disabled{ 愉 选 中 被 禁用 的 input*/ 
width: 30px; 
background-color: red; 























} 
input:checked { 


width: 30px; 
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</style> 

</head> 

<body> 
第 一 个 输入 框 : <input type="text" /> <br/><br/> 
第 二 个 输入 框 : <input type="button" disabled="disabled"/> <br/><br/> 
第 三 个 选择 框 : 
<input type="checkbox" checked="checked" style="vertical-align: middle;" /> 选中 项 
<input type="checkbox" style="vertical-align: middle;" /> 未 选中 项 

</body> 

</html> 





代码 运行 效果 如 图 7-12 所 示 。 











D 12700.18020/H505 x YD 127.00.12020/M50 x 【站 1270018020/M%8R xX) 站 12700120201MST x 
© |@ 127001 


第 一 个 稍 入 框 : 哈哈 只 哈哈 





图 7-12 ”状态 伪 类 选择 器 


7.4.4 00000 
CSS3 的 选择 器 还 有 很 多 ， 这 里 不 再 一 一 列举 。 表 7-6 列 出 几 个 常见 的 选择 器 。 























表 7-6 其 他 选择 器 


又 


pr 





















































EE 兄弟 选择 器 ， 选 择 巨 元 素 所 有 兄弟 元 素 下 
E:not(s) 否定 伪 类 选择 器 ， 匹 配 不 含有 s 选择 符 的 元 素 EE 
E:after/E::after 设置 在 对 象 后 发 生 的 内 容 。 用 来 和 content 属性 一 起 使 用 ， 并 且 必 须 定义 content 属性 
代码 示例 如 下 : 
<IDOCTYPE html> 
<html> 
<head> 


<style type="text/css"> 
p 一 Spanf 入 兄弟 选择 器 泽 
font-weight: bold; 
} 
Pp:not(span){ 和 # 否定 伪 类 选择 器 沁 


text-decoration: line-through; 
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#span::after{ ”/* 伪 对 象 选择 器 */ 
background:#fff; 
color:#000; 
content:" 这 是 写 在 p 标签 后 的 内 容 "; 
font-size:14px; 














} 
</style> 
</head> 
<body> 
<div> 
<p> 第 一 个 p 标签 </p> 
<p > 第 二 个 p 标签 </p> 
<span id="span"> 第 一 个 span</span> 
</div> 
</body> 
</html> 


代码 运行 效果 如 图 7-13 所 示 。 





口 127.0.0.1:8020/ 教 材 /07 x 邮 


G |@O 127.0.0.1:8020/ 教 材 /07/04/04- 其 他 选择 器 
点 击 这 里 导入 书签 。 开始 
宏一 一 二 二 
敌 三 全 P 款 们 
第 一 个 span 这 是 写 在 p 标 签 后 的 内 容 








图 7-13 ”其 他 选择 器 





75 章节 案例 :飞机 滑翔 动画 实现 


学 习 完 动画 的 详细 使 用 以 后 ， 使 用 CSS3 动画 实现 一 个 案例 。 页 面 中 一 个 小 飞机 图 片 ， 
从 页 面 左上 角 开 始 ， 飞 向 页 面 右边 中 间 位 置 ， 继 续 掉 头 飞 向 页 面 左下 角 结 束 。 
【案例 代码 】 















































<IDOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#plane img{ 
animation: myplane 6s ease infinite forwards; 
* 动 画 名 称 完成 动画 所 需 时 间 速度 曲线 无 限 循环 播放 动画 结束 后 停留 在 动画 结束 状态 */ 


position: absolute; 
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@keyframes myplane{ 
0%{ 
top: Opx; 
left: Opx; 
} 
S50%{ 
top: 35%; 
left: 90%; 
transform: rotateY(180deg); 
} 
100%{ 
top: 80%; 
left: Opx; 
} 
} 
</style> 
</head> 
<body> 


<div id="plane"> 


第 7 章 器 


A 


全 
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<img strc="img/plane.jpg" width="100" height="50" /> 


</div> 
</body> 
</html> 


代码 运行 实现 效果 如 





图 7-14 一 图 7-16 所 示 。 








7-14 阶段 0% 时 的 效 


DD 127.0.0.1802011705-: x 


GC © 127.00.1:802 





日 
个 








图 7-15 ”阶段 50% 时 的 效果 
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D 4270042020/1705-F x WW 


GC |@ 12700.1302011705-HTML5- 第 亏 /02-C5S/ 作 习 17- 动 画 
考 布 这 医生 入 厦 符 ， 开 好 








图 7-16 ”阶段 100% 时 的 效果 


【章节 练习 】 

过 渡 效 果 的 运行 速度 可 选 值 有 ease、 Ss 
常用 的 变换 属性 值 有 translate、 

写 出 一 段 简单 的 声明 动画 的 代码 。 

写 出 5 个 以 上 动画 的 属性 及 属性 值 。 

写 出 线性 渐变 的 W3C 标准 语法 。 
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面 中 占有 














080 CsUUU00000 


本 章 学 习 目标 : 





了 


熟练 掌握 盒 模型 中 margin、border、padding 的 使 














能 够 使 
能 够 使 


规则 ， 并 且 可 以 熟练 地 调整 页 面 


盒 模型 《Box Model) 是 CSS 中 一 个 非常 重要 的 概念 ， 
的 位 置 ， 主 要 在 网 页 的 设计 和 布局 时 使 用 。 本 章 
基于 盒 模型 实现 的 浮动 与 定 












































之 负 
Vo 


解 CSS 盒 模型 的 基本 概念 。 
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浮动 进行 页 





和 布局 的 调整 。 























定位 进行 页 


> 
> 
> 学 会 使 用 CSS3 中 关于 盒 模型 的 最 新 属性 。 
> 
> 

















和 布局 的 调整 。 


表示 了 页 面 中 的 一 
点 介绍 CSS 中 的 盒 模型 以 及 


个 元 素 在 页 

















CSS 盒 模型 以 及 浮动 、 定 位 的 学 习 ， 读 者 可 以 更 加 深刻 地 理解 网 页 ， 


5.1 盒 模型 


一 个 金子 


8.11 品 


CSS 盒 模型 主要 用 来 设计 和 布局 。HTML 文档 中 的 每 个 元 素 都 可 以 看 作 
型 规定 了 这 个 盒子 中 的 元 素 内 容 (content)、 内 边 距 (padding )、 边 框 (border) 和 外 边 明 


| 








UUUD 





(margin) 所 占据 的 空间 。 

















从 图 





























盒 模型 是 CSS 学 习 中 的 重要 环节 ， 在 














的 布局 。 











本 
洒 
当 
涉 
幸 
器 

















元 素 的 排列 


任何 一 个 元 素 都 可 以 理解 成 为 

















图 8-1 所 示 为 盒 模型 的 示意 


| 














yal-u3ew 


margin-top 
border-top 


padding-top 


content 


padding-bottom 


YJ31-13pl0oqg 
yal-3utpped 


ly3U-19p10qg 
ly3U-uIS1eUul 


如 
a 
a 
二 

. 
Ml 

go 
后 
三 


border-bottom 





margin-bottom 








图 8-1 盒 模 型 














8-1 中 可 以 看 


四 四 


个 盒子 ， 盒 模 


[ZI 





盒 模型 结构 从 内 到 外 依次 是 content、padding、border 和 
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margin。 在 后 续 小 节 中 将 详细 讲解 盒 模型 的 各 个 属性 。 
盒 模型 可 以 分 为 两 种 。 
1， 标 准 盒 模型 
标准 盒 模型 也 称 为 W3C 盒 模型 ， 现 在 大 部 分 的 浏览 器 都 采用 标准 盒 模型 。 在 标准 模式 
下 ， 一 个 元 素 所 占据 的 总 宽度 = width + padding (左右 ) + border 〈 左 右 ) + margin (左右 )， 
高 度 同 理 ， 如 图 8-2 所 示 。 




























































口 标准 盒 模型 
margin-top 
border-top 
padding-top 号 
吕 a a content 全 3 
Es “3 呈 国 5 
ea 5 Wo -ol 1 
二 1 避 加 二 . 
区 2 padding-bottom  ! 三 有 2 和 性 


border-bottom 


margin-bottom 


width 








图 8-2 ”标准 盒 模型 











2，IE 盒 模型 

盒 模型 也 称 为 怪异 盒 模型 ，IE6 之 前 的 浏览 器 默认 采用 怪异 盒 模型 。 在 怪异 模式 下， 

oe 的 总 宽度 = width + margin 〈 左 右 ) 〈 即 width 已 经 包含 了 padding 和 border)， 高 
度 同 理 ， 如 图 8-3 所 示 。 


口 IE 盒 模型 

































































margin-top 


border-top 


padding-top 


图 content 
全 
= 
0 
1 


ly319y 
yal-urdreu 
1]U3Uu-Surpped 


Jel-lsploq 
1y311-19p109 


ly3U-uI31eUl 


padding-bottom 
border-bottom 


margin-bottom 








width 1 
图 8-3 正 盒 模型 


在 CSS 中 可 以 设置 box-sizing 属性 来 规定 使 用 哪 种 模型 ， 属 性 值 有 两 个 。 
(1) content-box: 采用 标准 模式 解析 计算 ， 也 是 默认 模式 。 

(2) border-box: 采用 怪异 模式 解析 计算 。 

标准 盒子 模型 与 正 盒 模型 对 比 ， 代 码 示 例如 下 : 

<!DOCTYPE html> 


<html> 
<head> 
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<style type="text/css"> 
#div1{ 

width: 200px; 
height: 200px; 
padding: 20px; 
margin: 10pX; 
border: Spx solid yellow; 
box-sizing: border-box; ”/* 加 上 box-sizing: border-box; 后 ， 可 以 将 当前 div 


的 盒 模型 设置 为 更 盒 */ 
background-color: greenyellow; 
} 
#div2{ 
width: 200px; 
height: 200px; 
padding: 20px; 
margin: 10px; 
border: Spx solid yellow; 
backsground-color: red; 
} 
</style> 
</head> 
<body> 


<div id="div1">IE 盒 模 型 </div> 
<div id="div2"> 标 准 盒 模型 </div> 
</body> 
</html> 


展示 效果 如 图 8-4 所 示 。 





IE 盒 模型 


标准 盒 模型 








图 8-4 ”标准 盒 模型 与 下 盒 模型 对 比 
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代码 分 析 : 

















(250px); 而 在 正 盒 


含 了 


学 习 笔 





从 图 














由 此 可 得 出 结 
内 容 区 
































: 标准 


x 1 


8.12 margin] DUODD 


FE 

















1. 外 边 距 犁 




















二 


辕 性 值 














可 以 是 














写 一 个 数值 
写 两 个 数值 : 
写 三 个 数值 : 
写 四 个 数值 : 





围绕 在 元 素 周围 的 空 
元 素 。 
外 边 距 有 四 个 属性 可 以 设置 ， 对 应 
margin-bottom、 margin-left、margin-right 来 分 别 设置 ， 
是 带 单 位 的 数值 (如 像素 、 
简写 形式 的 margin 可 以 有 1 一 4 个 值 。 
上 、 下 、 左 、 右 四 个 方向 数值 相等 。 
第 一 个 数 等 于 上 下 外 边 距 ， 
边 距 ， 左 边 默认 等 于 右边 。 


和 属性 




















8-4 及 代码 示例 中 可 以 看 到 ， 


: 盒 模 型 








记 : HTML5+CSS3+JavaScript 




















和 白 区 域 就 是 外 边 距 ， 








7 
上 、 右 、 下 、 











设置 的 宽度 只 包含 内 容 





上 、 下 、 左 、 右 四 个 方向 ， 























为 两 个 <div> 设 置 的 宽 、 高 都 是 200px， 并 
都 设置 了 20px 的 padding 和 5px 的 border， 但 是 标准 盒 中 <div> 所 占 的 实际 区 域 变 大 
，<div> 的 实际 区 域 依然 是 200px， 但 是 内 容 区 域 缩小 为 150px。 

区 域 ， 而 下 盒 模型 设置 的 宽 


高 包 








EE 是 透明 的 ， 因 此 不 会 遮挡 其 后 面 的 
































可 以 使 用 margin-top、 
































厘米 等 


























0 














左 4 个 方向 的 边 距 。 





第 二 个 数 等 于 左 





bb 可 以 使 用 


， 也 可 以 是 百分比 ，i 











当 设 置 margin: 0 auto; 时 ， 代 表 块 级 盒子 在 父 容器 

















代码 示例 如 


下 : 


<!IDOCTYPE html> 


<html> 
<h 
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ead> 


<style type="text/css"> 


#div{ 
width: 200px; 
height: 200px; 


color: white; 


} 


#div .p{ 
width: SOpx; 
height: SOpx; 
color: black; 


backsground-color: blue; 


margin: 0 auto; 


background-color: yellow; 
margin: SOpx 10px SOpx 10px; 
margin: SOpx 10px; 

margin: SOpx 10px SOpx; 


margin: SOpx; 

















简写 形式 margin 来 设 
还 可 以 设 为 auto。 


右 外 边 距 。 











中 水 平 居 中 。 

/* 父 盒子 在 浏览 器 中 水 平 居中 关 
办 有 ES 在 
作 上 = 下 、 交 = 在 
Wo 
人 上 == 和 有 = 下 = 在 
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浊 
margin: 0 auto; 匀 设置 水 平 居 中 冯 





} 
</style> 
</head> 
<body> 
<div id="div"> 
交合 于 
<p class="p"> 子 盒子 </p> 
</div> 
</body> 
</html> 


实现 效果 如 图 8-5 所 示 ， 该 效果 实现 了 子 盒子 在 父 盒 子 中 居中 显示 ， 以 及 父 盒子 在 浏览 
器 中 的 居中 显示 。 





口 127.0.0.1:8020/H5 教 材 x 了 





人 io 127.0.0.1:8020/H5 教 材 /08-CSS 合 模型 与 浮动 定位 /01/02-margin 五 种 设置 方式 .html?_hbt... 安 | : 
点 击 这 里 导入 书签 。 开始 





图 8-5 外边 距 设 置 方 式 





2. 多 个 盒子 之 间 的 外 边 距 影响 
(1) 行内 盒子 水 平 排放 的 外 边 距 
结论 : 水 平 排放 的 盒子 ， 水 平 间 距 是 margin 的 累加 ， 如 图 8-6 所 示 。 


图 8-6 ”水平 外 边 距 合并 


(2) 块 级 盒子 垂直 排放 的 外 边 距 
结论 : 垂直 排放 的 盒子 ， 垂 直 间 距 是 合并 的 〈 取 最 大 值 )， 如 图 8-7 所 示 。 
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margin-bottom:20px 


margin-top:30px 





两 个 元 素 设置 的 边 距 实际 浏览 器 显示 的 边 距 


图 8-7 垂直 外 边 距 合 并 
(3) 父 、 子 盒子 的 垂直 外 边 距 合并 











未 设置 子 盒子 的 上 外 边 距 和 为 子 盒子 添加 30px 的 上 外 边 距 后 的 效果 如 图 8-8 和 图 8-9 


所 示 。 





C io 127.0.0.1:8020/HelloWorld/CSS3/ch08.html?_hbt=15050912... 安 | : 











图 8-8 ”未 设置 子 盒子 的 上 外 边 距 时 


GC |© 127.0.0.1:8020/HelloWorld/CSS3/ch08.html?_hbt=15050912. 从 | : 


图 8-9 ”为 子 盒子 添加 30px 的 上 外 边 距 后 





从 图 8-9 中 可 以 看 到 ， 在 给 子 盒子 添加 上 外 边 距 后 ， 





、 子 盒子 同时 下 移 ， 这 说 明 父 、 


子 盒子 的 外 边 距 合并 了 。 为 子 信子 添 加 的 上 和 外边 虐 也 就 是 为 交合 子 汪 加 了 上 外 过 中 这 对 网 
定 影响 ， 为 了 消除 这 种 效果 ， 本 书 中 提供 了 三 种 解决 方式 。 


) 父 盒子 添加 overflow: hidden。 
) 父 盒子 添加 padding。 
) 父 盒子 添加 border。 


Te 种 方式 都 可 以 解决 为 子 盒子 添加 上 外 边 距 后 ， 父 盒子 也 随 之 移动 的 情况 。 但 是 ， 


实际 开发 中 最 常 使 用 第 一 种 方式 ， 由 于 第 二 、 第 三 种 方式 给 父 盒 


和 border， 可 能 也 会 对 网 页 布局 细 贡 产生 影响 ， 所 以 不 常 使 月 
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有 。 


子 添加 了 不 必要 的 padding 


8.1.3 borde[ 口 口 
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元 素 的 边框 是 围绕 在 元 素 内 边 距 外 的 一 条 或 多 条 线 。 通 过 CSS 可 以 规定 元 素 边 框 的 样 
式 、 宽 度 和 颜色 ， 下 面 介绍 边框 的 常用 属性 。 

1. border-style 

border-style 用 于 为 元 素 设 置 边框 的 样式 ， 可 以 单独 设置 一 个 边框 ， 也 可 以 设置 所 有 边 
框 。 单 独 设 置 一 条 边框 时 写 为 border-bottom-style。 

当 使 用 border-style 设置 边框 样式 时 ， 可 以 写 1 一 4 个 值 。 

写 一 个 值 时 : 设置 四 个 边框 为 同一 样式 。 

写 两 个 值 时 : 第 一 个 值 设置 上 下 边框 ， 第 二 个 值 设置 左右 边框 。 

写 三 个 值 时 : 第 一 个 值 设置 上 边框 ， 第 二 个 值 设置 左右 边框 ， 第 三 个 值 设置 下 边框 

写 四 个 值 时 ;依次 设置 上 、 右 、 下 、 左 四 个 边框 。 

基本 语法 如 下 : 

border-style:dotted solid dashed double; ”分 别 设置 四 个 边框 的 样式 */ 

border-style 的 常用 属性 值 有 以 下 几 个 。 

none: 无 边框 。 

hidden: 与 none 相同 。 

dotted: 设置 为 点 状 边框 。 

dashed: 设置 为 虚线 边框。 

solid: 设置 为 实 线 边 框 。 

double: 设置 为 双 线 边框 。 双 线 的 宽度 等 于 border-width 的 值 。 

2. border-width 

border-width 用 于 为 元 素 的 边框 设置 宽度 ， 可 以 单独 设置 一 个 边框 ， 也 可 以 设置 所 有 边 
框 。 单 独 设置 一 条 边框 时 写 为 border-bottom-width， 当 使 用 简写 形式 border-width 时 ， 值 也 
有 1~4 个 ， 代 表意 思 与 border-style 相同 。 

只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 则 视 为 没有 边框 ， 
宽度 为 0。 

基本 语法 如 下 : 

border-width:thin medium thick 10px; 人 # 分 别 设置 4 个 边框 的 宽度 */ 

border-width 的 属性 值 通常 有 以 下 四 种 。 

thin: 设置 为 细 边 框 。 

medium: 默认 ， 设 置 为 中 等 边框 。 

thick: 设置 为 粗 边 框 。 

length: 使 用 带 单 位 的 数值 自 定 义 边 框 宽度 ， 不 可 设置 为 负 值 。 

3. border-color 

border-color 属性 设置 四 条 边框 的 颜色 ， 可 以 单独 设置 一 个 边框 ， 也 可 以 设置 所 有 边 
框 。 单 独 设置 一 条 边框 时 写 为 border-bottom-color， 当 使 用 简写 形式 border-color 





时 ， 值 也 
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有 1~4 个 ， 代 表意 思 与 border-style 相同 。 
基本 语法 如 下 : 























border-colorred green blue yellow; 。/* 分 别 设置 四 个 边框 的 颜色 六/ 


4. 边框 的 添加 方式 

给 元 素 添加 边框 有 两 种 常用 的 方式 。 
(1) 通过 上 述 三 个 属性 分 别 设置 
代码 示例 如 下 : 

















<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#div1{ 
border-style: dotted; 
border-width: Spx; 
border-color' red; 
} 
#div2{ 
border-bottom-color: blue; 
border-bottom-style: solid; 
border-bottom-width: Spx; 
} 
</style> 
</head> 
<body> 
<div id="div1"> 第 一 个 div</div> 
<div id="div2"> 第 二 个 div</div> 
</body> 
</html> 








代码 运行 效果 如 图 8-10 所 示 。 











镇 二 个 div 
































图 8-10 分别 设 置 边框 各 个 属性 

















使 用 border 属 怕 

















HT 
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， 进 行 简写 ， 提 供 三 个 属性 值 ， 分 别 代表 边框 宽度 、 边 框 


F 式 和 颜色 ， 





AS _- 立 - 


第 8 章 





三 个 属性 没有 前 后 顺序 。 
代码 示例 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 














<style type="text/css"> 
#div1{ 
border: Spx solid red; 


} 
#div2{ 
border-bottom: Spx dotted blue; 
} 
</style> 
</head> 
<body> 


<div id="div1"> 第 一 个 div</div> 
<div id="div2"> 第 二 个 div</div> 
</body> 
</html> 











代码 运行 效果 如 图 8-11 所 示 。 








C | © 127.0.0.1:8020/H5 教 材 /08-CSS 合 模型 
点 二 这 里 导入 书签 。 开始 


第 二 个 div 























图 8-11 设置 border 属性 (简写 形式 ) 

















8.1.4 padding] 0 DOD 








CSS 盒 模 型 与 浮动 定位 





内 边 距 规定 元 素 边框 与 元 素 内 容 之 间 的 区 域 ， 也 称 为 填充 。 内 边 距 会 使 














区 域 变 大 ， 使 用 时 需 注意 盒 模式 实际 显示 的 大 小 。 


应 























padding 属性 是 一 个 简写 属性 ， 用 于 设置 内 容 与 边框 之 间 的 填充 区 域 ， 可 以 写 1~4 个 





值 ， 同 margin。 


基本 语法 如 下 : 
padding:25px; 上 六 4 个 边 都 是 25px */ 
padding:25px S50px; 访 上 下 25px， 左 右 50px */ 
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padding:25px 50px 30px; 访 上 25px， 右 50px， 下 30px， 左 默认 = 右边 沁 
padding:25px 50px 30px 60px; Wo Sp {1 SOpey 30pXr Mo 00pR 


代码 示例 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<style6 type="text/css"> 
#div1{ 

width: 100px; 
height: 100px; 
padding:50px; 





color: white; 
background-color: red; 
} 
#div2{ 
width: 100px; 
height: 100px; 
color: white; 
background-color: blue; 
} 
</style> 
</head> 
<body> 
<div id="div1"> 设 置 padding</div> 
<div id="div2"> 未 设置 padding</div> 
</body> 
</html> 





代码 运行 效果 如 图 8-12 所 示 ， 可 以 清晰 地 看 到 第 一 个 
div 添加 padding 后 ， 实 际 所 占 区 域 被 撑 大 (注意 :div1 为 标 
准 盒 模型 ， 而 不 是 正 盒 模型 )。 























设置 padding 


s.2 “会 模 型 相关 属性 


除了 margin、border、padding 等 盒 模型 的 属性 ， 盒 模型 
还 有 很 多 重要 属性 需要 掌握 ， 如 内 容 溢出 控制 、 外 围 线 、 盒 
子 阴影 、 边 框 贺 角 、 图 片 边框 等 。 















































未 设置 
8.2.1 ovefrflowl] 中 中 中 品 品 品 padding 
overflow 属性 规定 了 内 容 溢 出 盒子 时 如 何 处 理 ， 属 性 值 
有 四 个 : 
1) Visible( 默 认 值 ); 内 容 不 会 被 修剪 ， 会 呈现 在 元 素 图 8-12 ”内 边 距 设置 方式 
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框 之 外 。 

2) auto: 根据 内 容 多 少 选择 显示 深 动 条 ， 文 字 多 的 时 候 显 示 深 动 条 。 
3) scroll: 无 论文 字 多 少 ， 都 会 显示 垂直 和 水 平 两 个 滚动 条 。 

4) hidden: 超出 区 域 的 文字 直接 隐藏 ， 无 法 看 到 。 

代码 示例 如 下 : 




















<style type="text/css"> 
#div1{ 
width: 255px; 
height: 200px; 
margin—left: 15px; 








float: left; 
/* overflow: auto; */ 不 例 图 如 图 8-13 所 示 光 
/* overflow: scroll; */ 上 示例 图 如 图 8-14 所 示 半 
overflow: hidden; 此 示例 图 如 图 8-15 所 示 对 
} 
</style> 
<body> 














<div id="div1"> 品 牌 故 事 主要 开展 Java、iOS、android、H5、PHP、 大 数据 、VR 方面 的 技 
术 培 训 。 同 时 针对 在 校 成 绩优 异 、 动 手 能 力 强 的 学 生 ， 直 接 提供 就 业 辅导 服务 ， 充 当 企 业 与 学 生 中 间 的 桥 
人 人 IT 企业 建立 良好 的 合作 关系 。 烟 台 杰 瑞 教育 科技 
有 限 公司 《简称 杰 瑞 教 育 )， 自 2011 年 以 来 ， 一 直 致 力 于 为 IT 企业 提供 助力 ， 培 养 后 备 力量 。 目 前 ， 已 成 
为 知名 I 全 2 资源 提供 商 。 杰 瑞 教 育 依托 捷 瑞 数字 的 强大 企业 背景 ， 专 注 教 育 培训 、IT 人 
才 选 拔 推 荐 业务 。 

</div> 

</body> 







































































































































































overflow 属性 值 为 auto 时， 如 图 8-13 所 示 。 








品 127.0.0.1:8020/H5 教 条 x 





CO 12700.1 ， f f 己 记 四 


忌 牌 放 事 主要 开展 Java、 iOS 
Android、H5、PHP Ean 





角力 
丰 壕 : 理 供 各 博导 服务 充当 企 
业 与 学 生 中 间 的 桥梁 。 经 过 了 多 























i 


图 8-13” ”overflow 属性 值 设 为 auto 时 的 效果 




















overflow 属性 值 为 scroll 时 ， 如 图 8-14 所 示 。 
overflow 属性 值 为 hidden 时 ， 如 图 8-15 所 示 。 


注意 : 还 可 以 使 用 overflow-x 和 overflow-y 设置 水 平和 垂直 方向 的 滚动 条 是 否 显示 。 
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8.2.2 outling] 


D 127.0.0.1#020/H59 x We 


© | © 127.0.0.1:8020/H5 才 材 /08-CS 
室 二 这 于 她 入 书 答 。 开 始 


品牌 故事 主要 开展 Java、iOS、 
Android、H5、PHP、 大 数据 、 
WVR 方 面 的 技术 培训 ，。 同 时 针对 在 
校 成 如 优异 、 动 手 能 力 强 的 学 生 ， 
直接 提供 就 业 辅导 骏 务 ， 充 当 企 
业 与 学 生 中 间 的 桥梁 。 既 过 了 多 
年 艰 震 创业 和 和 精神 业 枉 已 与 国内 
数 所 高 校 、 林 企业 建立 良好 的 合 


PE 
4 » 











图 8-14 overflow 属性 值 设 为 scroll 时 的 效果 





口 127.0.0.18020/H5 交 本 x > 
@ | @ 12700.1:8020/H5 歼 材 /08-CSS 辣 想 量 与 浮动 定位 /01/05-overfiow .html?_hbt=15118636621.. Q 女 | 四 
庶 去 这 里 导入 书 笠 ， 开始 


品牌 政事 主要 开展 Java、iOS、 
Android、H5、PHP、 大 数据 、VR 
方面 的 技术 丧 训 。 同 时 针对 在 校 成 继 
优异 、 动 手 能 力 强 的 学 生 ， 直接 提 
供 舟 业 靖 导 上 服务， 充当 企业 与 学 生 
中 间 的 桥梁 。 经 过 了 多 年 艰苦 创业 

和 精神 昱 罢 已 与 国内 数 所 商 校 、IT 企 
业 建 立 奥 好 的 合作 关系 。 烟台 杰 瑞 


教育 科技 有 限 公司 ( 简称 赤 璃 数 


Nr A 











图 8-15 overflow 属性 值 设 为 hidden 时 的 效果 


UD0O 














outline 是 显示 在 边框 边缘 外 围 的 一 条 线 ， 起 到 突出 元 素 的 作用 。 外 围 线 的 属性 写法 与 边 














ke 





匡 相 同 ， 此 处 不 


次 述 。 外 围 线 不 会 占用 空间 。 





基本 语法 如 下 : 
outline:red dotted medium; 


代码 示例 如 下 : 


<style typ 


e="text/css"> 


#div{ 


} 
</style> 
<body> 


width: 100px; 

height: 100px; 

outline: red dotted 20px; /x 给 div 添加 外 围 线 */ 
background-color: darkgrey; 





<div 1d="div"></div> 
<span>div 添加 outliine， 外 围 线 不 会 占用 空间 ， 会 盖 住 周围 的 文字 </span> 


</body> 





实现 效果 如 图 8-16 所 示 ， 图 中 可 以 看 到 outline 与 border 的 区 别 ，outline 的 高 度 会 履 盖 
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到 span 的 上 方 。 


口 127.0.0.1:8020/H5 教 材 x 


Dai\@in( 作 iin@ 外 围 线 不 会 占用 空间 ,会 关 住 周围 的 文字 











图 8-16 外围 线 














8.2.3 box-shadow] D00O0O 








box-shadow 是 给 元 素 周 围 添 加 阴影 效果 ， 该 属性 有 六 个 属性 值 。 

1) X 轴 阴 影 距离 ， 必 写 ， 可 正 可 负 ， 正 值 右 移 ， 负 值 左 移 。 

2) Y 轴 阴 影 距 离 ， 必 写 ， 可 正 可 负 ， 正 值 下 移 ， 负 值 上 移 。 

3) 阴影 模糊 半径 ， 可 写 ， 只 能 为 正 ， 默 认 值 为 0。 数 值 越 大 ， 阴 影 越 模 糊 。 

4) 阴影 扩展 半径 : 可 写 ， 可 正 可 负 ， 默 认 值 为 0。 数 值 增 大 ， 了 明 影 扩大 ; 数值 减 小 ， 
阴影 缩小 。 













































































5) 阴影 颜色 : 可 写 ， 默 认为 黑色 。 
6) 内 外 阴影 : 可 写 ， 可 选 值 ，inset (内 阴影 )， 不 选 默认 为 外 阴影 。 
代码 示例 如 下 : 
<style type="text/css"> 
.Shadow{ 
width: 100px; 


height: 70px; 
background-color: yellow; 
box-shadow: Spx Spx 10px 10px green; 
} 
</style> 
<body> 
<div class="shadow"> </div> 
</body> 


代码 运行 效果 如 图 8-17 所 示 。 





8.2.4 border- radiuqdl]DDODD 





border-radius 属性 是 一 个 简写 属性 ， 可 以 设置 一 个 元 素 四 个 边框 的 圆 角 ， 与 之 前 的 属性 
相同 ， 也 可 以 单独 为 其 中 一 个 角 设置 样式 ， 写 法 为 border-top-left-radius:20px。 
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站 CSS 合 模型 
G |© 127.0.0.1:8020/HelloWorld/CSS3/ch08.html?_hbt=15050912... 





图 8-17 盒子 阴影 


1. 基本 用 法 
border-radius 的 属性 值 有 两 种 写法 ， 一 种 是 使 用 带 单位 的 数值 ， 另 一 种 是 使 用 百分比 设 


置 。border-radius 可 设置 的 值 有 八 个 ， 基 本 语法 如 下 : 


border-radius: 40px 30px 20px 10px/40px 30px 20px 10px; 




































































代码 含义 :“/” 前 后 各 有 四 个 值 ， 依 次 对 应 的 是 左上 角 、 右 上 角 、 右 下 角 、 左 下 角 。 而 
“/” 前 表示 四 项 点 沿 X 轴 移 动 的 距离 ，“/” 后 表示 四 顶点 沿 Y 轴 移 动 的 距离 。 移 动 完成 后 ， 


用 弧 线 连接 ， 即 为 贺 角 ， 如 图 8-18 所 示 。 




















站 127.0.0.1:8020/ 教 材 /08 x 
G | © 127.0.0.1:8020/ 滔 




















图 8-18 边框 圆 角 





以 图 8-18 左上 角 为 例 ，div 原来 的 顶点 为 O 点， 给 div 添加 如 下 代码 ， 左 上 角 沿 X 轴 
移动 40px 到 A 点 ， 沿 立轴 移动 40px 到 B 点 ， 确 定 A 和 B 点 后 ， 两 点 之 间 画 弧 线 ， 即 为 左 
上 角 的 圆 角 弧度 。 其 余 三 个 角 同 理 。 


border-radius: 40px 30px 20px 10px/40px 30px 20px 10px; 





























2. 简写 形式 
为 了 方便 使 用 ，border-radius 同样 提供 了 简写 形式 ， 简 写 原 则 如 下 。 
1) 只 写 X 轴 ，Y 轴 将 默认 等 于 X 轴 。 基 本 语法 如 下 : 














border-radius:50px 20px 50px 20px; /只 写 X 轴 。 YY 轴 =X 轴 











2) 4 个 角 写 不 全 ， 默 认 对 角 相等 。 基 本 语法 如 下 : 
border-radius:50px 20px; // 只 写 左 上 角 ， 右 上 角 。 右 下 角 = 左 上 角 ; 左下 角 = 右 上 角 
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3) 只 写 一 个 值 ， 默 认 8 个 数 均等 。 基 本 语法 如 下 : 





border-radius:50p;，// 只 写 一 个 值 ， 默 认 8 个 数 均等 


8.2.5 borde-imaggd] DODDD 















































border-image 表示 为 当前 盒子 设置 一 个 图 片 边框 ， 也 就 是 使 用 图 片 进行 裁 切 作 为 边框 显 
个 ， 主要 有 如 下 四 个 需要 设置 的 部 分 。 





























1. 图 片 路 径 (border-image-source) 


于 当 作 边框 的 图 片 地 址 ， 使 用 ul0 引 入 



































区 


片 路 径 。 基 本 语法 如 下 : 











Ne 


























border-image-source: url(img/border.png); 


2. 图 片 切片 宽度 (border-image-slice) 
有 4 个 值 ， 代 表 上 、 右 、 下 、 左 4 条 切线 ， 通 过 4 条 切线 切割 |， 








可 以 将 图 片 分 为 9 宣 


































































































格 。9 宫 格 4 个 角 分 别 对 应 边框 的 4 个 角 ( 不 会 进行 任何 拉 伸 )，9 宫 格 4 条 边 分 别 对 应 4 条 
边框 (会 根据 设置 进行 拉 伸 、 铺 满 、 重 复 等 操作 ， 后 续 讲解 )。 
基本 语法 如 下 : 





border-image-slice:27 27 27 27; 
border-image-slice:27; 


/ 表示 4 条 切线 都 是 27px 









































如 图 8-19 所 示 ，4 条 虚线 分 别 代 表 4 条 切线 。 
上 边框 
的 图 片 SE 
左上 角 人 
的 图 片 | 人 过 
» 一 一 二 一 右边 框 
| | 的 图 片 
的 图 上 -二 一 一 一 局 一 到- 
全 | 看 下 角 
1 1 的 图 片 
左下 角 - 
的 图 片 下 边框 
的 图 片 
图 8-19 图片 切片 宽度 
3. 边框 宽度 (border-image-width ) 
边框 宽度 表示 图 片 边框 的 宽度 大 小 ， 使 用 规则 与 border 类 似 。 
基本 语法 如 下 : 


border-image-width: 10 10 10 10; 
border-image-width: 10; 








/ 表示 4 条 边框 的 宽度 都 是 10px 


4. 图 片 重复 方式 (border-image-repeat) 
设置 边框 区 域 图 片 的 重复 方式 ， 常 用 的 属性 值 主 














: stretch 〈 拉 伸 )、round ( 铺 





个 
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满 )、repeat (重复 )。 




















代码 示例 如 下 : 
border-image-repeat:stretch:; / 拉 伸 
border-image repeat:round; // 铺 满 
border-image-repeat:repeat; // 重复 


效果 如 图 8-20 所 示 。 





襄 CSS 合 模 豆 x 
G ©@ 12700.1 W 
09 
仿 二 各 钙 
SS 多 
图 8-20 ”边框 的 图 片 重复 方式 











铺 满 和 重复 的 区 别 如 下 : 

1) 重复 会 保持 原 有 4 条 边 的 宽度 ， 可 能 导致 角落 处 无 法 显示 完整 一 个 图 标 。 
2) 铺 满 会 对 4 条 边 进行 适当 地 拉 伸 、 压 缩 ， 确 保 可 以 正好 显示 完全 。 
5. 简写 方式 (border-image) 

上 上 述 四 个 属性 分 开设 置 比较 麻烦 ， 可 以 使 用 border-image 一 次 性 设置 所 有 属性 。 
基本 语法 如 下 : 


























































































































border-image: url(img/border.png) 27/10px stretch; 
-Webkit-border-imasge: url(img/borderpng) 27/10px repeat; / webkit 浏览 器 内 核 专用 


代码 解释 : 


缩写 时 的 顺序 必须 按照 图 片 路 径 、 切 片 宽度 、 边 框 宽度 、 重 复方 式 。 其 中 ， 切 片 宽度 和 
边框 宽度 之 间 用 “/” 分 隔 ， 且 只 能 在 边框 宽度 后 带 有 一 个 px 单位 。 












































3 ”浮动 与 清除 浮动 
在 网 页 中 ， 行 级 元 素 从 左 往 右 显 示 ， 块 级 元 素 独占 一 行 显示 。 人 
































在 布局 中 受到 的 局 限 性 非常 大 ， 往 往 需要 打破 常规 的 文档 流 模型 ， 而 浮动 就 是 其 中 最 常用 的 
方式 之 一 
8.3.1 _ float 口 品 














float 属性 使 元 素 脱 离 了 常规 文档 流 而 表现 为 向 右 或 向 左 浮 动 ， 由 于 浮动 的 元 素 不 在 文档 
流 中 ， 所 以 在 文档 流 中 浮动 的 元 素 就 像 不 存在 一 样 ， 其 周围 的 元 素 也 会 重新 排列 。 和 常用 的 
float 属性 有 三 个 。 

1) left 元 素 向 左 浮动 。 























出 














116 


第 8 章 CSS 盒 模型 与 浮动 定位 


2) right 元 素 向 右 浮动 。 
. none ee 元 素 不 浮动 。 








<style type="text/css"> 
#div1{ 
width: 100px; 
height: 100px; 
background-color': red; 


float: left; /# 给 divl 添加 左 浮动 */ 
} 
#div2{ 
width: 100px; 
height: 100px; 
backsground-color: yellow; 
float: right; /# 给 div2 添加 右 浮 动 */ 
} 
</style> 
<body> 


<div id="div1"> 元 素 问 左 浮动 </div> 
<div id="div2"> 元 素 问 右 浮动 </div> 
</body> 


8-21 为 两 个 分 别 向 左 和 向 右 浮动 的 元 素 。 








区 | 














口 Css 会 模型 
CGC |© 127.0.0.1:8020/H 





图 8-21 向 左 和 癌 右 浮动 的 元 素 





8.3.2 dear00UDODOD 

当 一 个 元 素 浮 动 以 后 ， 很 有 可 能 对 其 他 元 素 的 位 置 造 成 影响 ， 如 图 8-22 所 示 ， 两 个 div 
为 上 下 排列 。 

当 给 divl 添加 浮动 以 后 ，div2 受到 divl 的 影响 ， 会 产生 如 图 8-23 所 示 的 情况 ， 下 方 的 
div 受到 上 方 的 影响 ， 位 置 发 生变 化 。 但 是 ， 浮 动 只 能 打破 文档 流 ， 不 能 打破 文字 流 ， 所 以 
div2 的 文字 保持 在 原 位 置 不 动 。 

为 了 解决 这 个 情况 ， 可 以 给 第 二 个 div 添加 clear 属性 ，clear 属性 有 三 个 可 选 值 : left、 
right、both， 分 别 表示 清除 左 浮动 影响 、 右 浮动 影响 ， 以 及 同时 清除 左右 浮动 的 影响 。 实 际 
开发 过 程 中 ， 为 了 方便 使 用 ， 通 常 直 接 使 用 “clear:both”。 

比如 上 述 案 例 中 ， 给 第 二 个 div 添加 “clear:both” 后 ， 显 示 效 果 又 将 回 到 图 8-22 所 示 。 





















































总 






































人 二 
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口 127.0.0.1:8020/ 教 材 /08 x WE 
CG | @ 127.0.0.1:8020/ 教 材 /08-CSS 盒 模型 与 浮动 定位 /03 2- 清 除 浮动 html?_hbt=151192483...，Q 女 | ; 














图 8-22 ”两 个 div 均 未 设置 浮动 时 的 效果 


D 127.00.1.5020/E9705 X Wo 
GC |® 12700.1 


点 击 这 二 异 人 书 答 。 开始 








图 8-23 ”给 第 一 个 div 设置 浮动 后 的 效果 











833 UU00OU0000000000 

通过 8.3.1 节 ， 读 者 可 以 发 现 了 一 个 现象 ;元 素 浮动 会 造成 其 他 元 素 位 置 的 变化 。 除 此 
之 外 ， 浮 动 还 有 一 种 特殊 情况 ， 当 子 盒子 全 部 浮动 ， 如 果 父 盒子 没有 指定 高 度 ， 则 父 盒 子 高 
度 将 会 塌陷 为 0。 

比如 ， 一 个 ul 列表 ， 如 果 没 有 给 它 指定 高 度 ， 而 是 由 li 的 高 度 撑 开 ， 效 果 如 图 8-24 
所 示 。 











四 127.0.0.1:8020/ 教 材 /08 x 
CG | © 127.0.0.1:8020/ 教 材 /08-CSS 盒 模型 与 浮动 为 /02- 父 盒子 ul 塌陷 问题 .html?_hbt=15. 
点 二 这 里 导入 书签 。 开始 


图 8-24 未 指定 高 度 ， 列 表 高 度 由 直 撑 开 时 的 效果 



































当 ul 里 面 的 i 全 部 浮动 以 后 ，ul 的 高 度 就 将 塌陷 为 0， 也 就 是 无 法 看 到 ul 的 背景 
了 ， 如 图 8-25 所 示 。 

从 图 8-25 可 以 看 到 ， 当 1i 全 部 浮动 时 ，ul 的 背景 色 消失 了 ， 也 就 是 说 ， 此 时 的 高 度 
为 0， 即 子 元 素 全 部 浮动 后 ， 父 元 素 的 高 度 将 会 塌陷 为 0。 

为 了 解决 这 个 问题 ， 本 书 提供 三 种 解决 思路 。 
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口 127.0.0.1:8020/ 教 材 /0 x 到 
G | © 127.0.0.1:8020/ 教 材 /08-CSS 盒 模型 与 浮动 定位 /03- 浮 动 /02 


点 去 这 里 导入 书签 。 开始 








图 8-25 i 全 部 浮动 后 的 效果 


1. 在 父 元 素 中 添加 一 个 新 的 元 素 ， 为 新 元 素 设置 clear:both 
代码 示例 如 下 : 


<div class="outer"> 
<div class="div1l">1</div> 
<div class="div2">2</div> 
<div class="div3">3</div> 
<div class="clear"> </div> 
</div> 
.Clear{ 
clear:both; 
height: 0; 
} 


2. 为 父 元 素 添加 overflow: hidden 属性 
代码 示例 如 下 : 


<div class="outer"> 
<div class="div1">1</div> 
<div class="div2">2</div> 
<div class="div3">3</div> 
</div> 
.Outer{ 
overflow:hidden:; 
} 


3. 为 父 元 素 添加 伪 类 : after， 对 伪 类 设置 clear:both 
代码 示例 如 下 : 


<div class="outer"> 
<div class="div1">1</div> 
<div class="div2">2</div> 
<div class="div3">3</div> 
</div> 
.Outer :after { 
clear:both:; 
content:"; 
display:block; 
width: 0; 
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height: 0; 


ne 


8.4 定位 








定位 与 浮动 一 样 ， 都 是 改变 元 素 在 正常 文档 流 
position 定位 属性 可 选 的 属性 值 有 4 个 。 
1) relative: 相对 定位 。 
2) absolute: 绝对 定 
3) fixed: 固定 定位 。 
4) static: 没有 定位 ， 默 认 值 
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中 的 位 置 ， 对 网 页 内 




















当 元素 没 有 定位 ， 出 现在 正常 的 文档 流 中 ， 将 不 会 受 left、right、top 、bottom 和 z- 











请, 
于 
Hy 























index 的 影响 。 这 些 属性 值 会 在 后 文 进行 详细 介绍 。 


8.41 rgdativa] 0D0O0O 


ME pt 


使 用 position: relative; 设 
1) 相对 于 自己 原来 在 文档 流 中 的 位 置 定 位 ， 
元 素 位 置 。 
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元 素 为 相对 定位 元 素 ， 其 定位 机 制 如 下 : 


不 指定 top、left 等 定位 值 时 ， 不 会 改变 



















































































2) 相对 定位 元 素 仍 会 占据 原 有 文档 流 中 的 位 置 ， 而 不 会 释放 。 
代码 示例 如 下 : 
<!IDOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#div1{ 
width: 200px; 
height: 200px; 
border: 1px solid black; 
position: relative; /x* 对 divl 进行 相对 定位 半 
top: 100px; 访 设置 重新 定位 后 的 位 置 距 原 来 上 边 距 的 距离 */ 
left: 100px; 诺 设 置 重新 定位 后 的 位 置 距 原来 左边 距 的 距离 4#/ 
} 
#div2{ ”/* 作为 对 比 div 存在 */ 
width: 200px; 
height: 200px; 
background-color: blue; 
} 
</style> 
</head> 
<body> 


<div i1d="div1">div1 </div> 
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<div 1d="div2">div2</div> 
</body> 
</html> 





没有 进行 相对 定位 前 ， 效 果 如 图 8-26 所 示 ， 对 divl 进行 相对 定位 后 ， 实 现 效果 如 图 8-27 
所 示 。 





四 127.0.0.1:8020/ 教 材 /08 x 


GG | © 127.0.0.1:8020/ 教 材 /08-CSS 盒 模型 与 浮动 定位 /04- 定 位 /01- 相 对 定位 .html?_hbt= 
点 二 这 里 导入 书签 。 开始 




















图 8-26 没有 进行 相对 定位 


























图 8-27 对 divl 进行 相对 定位 

















从 图 8-26 和 图 8-27 可 以 看 出 ， 进 行 相 对 定位 后 的 元 素 相 对 自己 原来 的 位 置 下 移 100px 
( 距 原 来 位 置 的 顶部 100px)、 右 移 100px〔( 距 原来 位 置 的 左边 100px)， 而 且 元 素 重 新 定位 
后 ， 之 前 元 素 所 在 的 空间 并 没有 再 被 其 他 元 素 占据 ， 即 元 素 原来 的 空间 没有 被 释放 。 


8.42 absolutdj00D0D0 


使 用 position: absolute; 设 置 元 素 为 绝对 定位 元 素 ， 其 定位 机 制 如 下 : 

1) 相对 于 第 一 个 非 static 的 祖先 元 素 〈 即 使 用 了 relative、absolute、fixed 定位 的 祖先 元 
素 ) 进行 定位 。 

2) 如 果 所 有 祖先 元 素 均 未 定位 ， 则 相对 于 浏览 器 左上 角 定 位 。 

3) 使 用 absolute 的 元 素 会 从 文档 流 中 完全 删除 ， 原 有 空间 释放 不 再 占据 。 

代码 示例 如 下 : 
<!IDOCTYPE html> 


<html> 
<head> 
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<style type="text/css"> 
#div{ 
width: 400px; 
height: 400px; 
border: 3px solid black; 
margin: 0 auto; /* 使 父 盒子 居中 */ 





position: relative; /* 父 盒 子 没 有 添加 定位 时 ， 子 盒子 divl 如 图 8-28 所 示 ; 











父 盒 子 添 加 定位 后 ， 子 盒子 divl 如 图 8-30 所 示 */ 


} 
#div1{ 
width: 200px; 
height: 200px; 
background-color: yellow; 
position: absolute; 访 对 divl 进行 绝对 定位 对 
top: SOpx; 
left: 150px; 
} 
#div2{ / 作为 对 比 元 素 尝 
width: 200px; 
height: 200px; 
background-color: red; 
} 
</style> 
</head> 
<body> 


<div id="div"> 
<div id="div1"> 进 行 绝 对 定位 的 元 素 div1</div> 
<div id="div2"> 作 为 对 比 的 元 素 div2</div> 
</div> 
</body> 
</html> 


父 盒子 和 子 盒子 divl 都 没有 进行 定位 前 ， 如 图 8-28 所 示 。 当 对 divl 进行 
而 父 盒 子 没 有 进行 相对 定位 时 ， 实 现 效果 如 图 8-29 所 示 。 但 是 ， 当 对 divl 
位 ， 同 时 父 盒子 也 进行 了 相对 定位 时 ， 实 现 效果 如 图 8-30 所 示 。 


























口 127.0.0.1:8020/ 教 材 /05 x 邮 


CG | © 127.0.0.1:8020/ 教 材 /08-CSS 合 模型 与 浮动 定位 /04- 定 位 /02- 绝 久 


点 击 这 里 导入 书签 。 开始 























图 8-28 没有 进行 定位 时 的 效果 图 
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了 了 绝对 定位 ， 
进行 了 绝对 定 
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D 1270010020/ 坟 好 /06 x 


C |@ i27001 











图 8-29 ” 父 盒 子 没 有 定位 时 子 盒子 绝对 定位 的 效果 图 

















口 127.0.0.1:3020/ 守 24/06 x 
C | ©012700.1 
让 击 这 昌 避 入 书 签 ， 开 如 











图 8-30 ” 父 盒 子 有 定位 时 子 盒子 绝对 定位 的 效果 图 














从 图 8-28 和 图 8-29 可 以 看 出 ，divl 进行 相对 定位 后 ， 原 来 元 素 所 占 的 空间 被 释放 ， 紧 
接着 被 div2 占据 。 
从 图 8-29 和 图 8-30 可 以 看 出 ，divl 相对 于 使 用 了 relative 定位 的 祖先 元 素 div 进行 的 
定位 。 当 div 没有 进行 relative 定位 时 ，divl 相对 浏览 器 左上 角 进 行 定位 。 


8.4.3 fixed] [D0DODOO 
固定 定位 是 一 种 特殊 的 绝对 定位 ， 它 与 普通 绝对 定位 的 区 别 是 无 论 父 元 素 是 否定 位 ， 子 
元 素 如 果 采 用 固定 定位 ， 都 将 相对 于 浏览 器 左上 角 定 位 ， 且 固定 在 指定 位 置 ， 不 随 浏览 器 滚 
动 条 的 滚动 而 滚动 。 
代码 示例 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 


<style type="text/css"> 
#div{ 









































width: 400px; 
height: 400px; 
border: 3px solid black; 
margin: 0 auto; /x 使 父 合子 居中 */ 
position: relative; /* 父 盒 子 没 有 添加 定位 时 ， 子 盒子 divl 如 图 8-31 所 示 ; 
父 盒 子 添加 定位 后 ， 效 果 同 样 如 图 8-31 所 示 */ 
} 
#div1{ 
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width: 200px; 
height: 200px; 
background-color: yellow; 





position: fixed; 此 对 divl 进行 固定 定位 */ 
top: SOpx; 
left: 1 50px; 
} 
#div2{ /* 作 为 对 比 元 素 沁 
width: 200px; 
height: 200px; 
background-color: red; 
} 
</style> 
</head> 
<body> 


<div id="div"> 
<div id="div1"> 进 行 固 定 定 位 的 元 素 div1</div> 
<div id="div2"> 作 为 对 比 的 元 素 div2</div> 
</div> 
</body> 
</html> 








代码 运行 效果 如 图 8-31 所 示 。 




















图 8-31 子 容器 的 固定 定位 与 父 容器 是 否定 位 无 关 








从 图 8-31 可 以 看 出 ， 对 divl 进行 固定 定位 后 ， 原 来 的 元 素 空间 会 被 释放 ， 而 且 即使 父 
容器 div 添加 了 相对 定位 ，divl 依然 相对 于 浏览 器 左上 角 定 位 。 

注意 : 以 上 三 种 定位 方式 均 使 用 top、left、bottom、right 调整 位 置 。 当 left 和 right 同时 
存在 ，left 生效 ; 当 top 和 bottom 同时 存在 ，top 生效 。 














844 UUU0000000000 


定位 有 一 个 非常 重要 的 作用 ， 可 以 设置 元 素 的 绝对 居中 。 在 之 前 学 习 块 级 元 素 时 ， 可 以 
使 用 “margin:0 auto” 设 置 水 平 居 中 ， 而 设置 垂直 居中 ， 定 位 将 会 是 一 个 不 错 的 选择 。 
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实现 的 思路 包括 如 下 两 部 分 : 
1) 设置 父子 元 素 均 为 定位 元 素 。 
2) 对 子 元 素 设 置 。 基 本 语法 如 下 : 


left:30%; margin-left: - width/2; 
top:50%; margin-top: ~ height/2; 


























代码 示例 如 下 : 
<!IDOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.divl{ 
width: 100px; 
height: 100px; 
background-color: red; 
position: relative; 
} 
.div2{ 
width: SOpx; 
height: SOpx; 
backsground-color: blue; 
position: absolute; 
left: 50%; 
margin left: -23px; 
top: 50%; 
margin-top: ~-25px; 
} 
</style> 
</head> 
<body> 


<div class="div1"> 
<div class="div2"></div> 
</div> 
</body> 
</html> 





代码 运行 效果 如 图 8-32 所 示 。 





; 








口 CSS 会 模型 号 


GC | © 127.0.0.1:8020/HelloWorld/CSS3/¢ 





I 


图 8-32 元素 水 平 导 








直 居 中 
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8.45 z-index 


1. z-index 的 作用 
设置 定位 元 素 的 层 著 顺序 。 
2. 使 用 要 求 
1) 必须 是 定位 〈relative、absolute、fixed) 元 素 才 能 使 用 z-index。 
2) 使 用 z-index 需要 考虑 父 容器 的 约束 。 
G 如果 父 容器 没有 设置 z-index， 或 父 容 器 设置 为 z-index:auto， 则 子 容器 的 z-index 可 
以 不 受 父 容器 的 约束 。 
@ 如 果 父 容器 对 z-index 进行 了 设置 ， 则 子 容器 的 层 羞 顺序 将 以 父 容器 的 z-index 为 准 
(此 时 子 元 素 的 z-index 只 能 调整 自身 与 父 容器 中 不 同 子 元 素 之 间 的 层 琶 顺序 )。 
3. z-index:auto 与 z-index:0 的 异同 
1) z-index:auto 为 默认 值 ， 与 z-index:0 处 于 同一 平面 。 
2) z-index:auto 不 会 约束 子 元 素 的 z-index 层次 ， 而 z-index:0 会 约束 子 元 素 必 须 与 父 
元 素 处 于 同一 平面 。 
4. z-index 相同 〈 处 于 同一 平面 的 定位 元 素 ) 的 层 释 关系 
后 来 者 居 上 ， 即 写 在 后 面 的 元 素 在 上 一 层 。 
代码 示例 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#div1{ 
width: 200px; 
height: 200px; 
background-color: yellow; 














































































































































































































position: relative; 
top: SOpx; 
left: SOpx; 
z-index: 1; /* 使 





Hl 


用 z-index 更 改 divl 的 层 著 关系 */ 





} 
#div2{ 
width: 200px; 
height: 200px; 
background-color: red; 
position: relative; 
top: OpxX; 
left: 100px; 
} 
</style> 
</head> 
<body> 














<div id="div1"> 进 行 了 相对 定位 的 元 素 div1</div> 
<div id="div2"> 后 来 居 上 的 定位 元 素 div2</div> 








</body> 


126 


第 8 章 CSS 盒 模型 与 浮动 定位 


</html> 








没有 对 divl 使 用 z-index 之 前 的 实现 效果 如 图 8-33 所 示 ， 对 divl 使 用 z-index>0 之 后 
的 实现 效果 如 图 8-34 所 示 。 


D 127.0.0.1:;8020/ 通 村 /D8 x 


© ©127001 








图 8-33 ”没有 对 divl 使 用 z-index 之 前 的 效果 图 




















口 127.0.0.1.8020/ 教 材 05 x 同和 
G | @ 127.00.1:8020/ 教 材 /08-CSS 盒 模型 与 浮动 定位 /04- 定 位 /03-z-indexhtml?_hbt=15119378 
点 去 这 里 导入 书签 。 开始 


























图 8-34 对 divl 使 用 z-index>0 之 后 的 效果 图 





8.5 章节 案例 :网 页 布局 练习 


经 过 本 章 的 学 习 ， 应 用 盒 模 型 与 浮动 定位 等 知识 实现 如 图 8-35 所 示 的 网 页 布局 效果 。 














图 8-35 网 页 布局 案例 练习 
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【案例 代码 】 


<IDOCTYPE html> 
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<style type="text/css"> 


汉 
margin: 0; 
padding: 0; 
} 
#header{ 
height: 100px; 
} 


#header .left{ 
background-color: #FFOOFF:; 
height: 100%; 
width: 20%; 
float: left; 

} 

#header .center{ 
background-color: #FFFFOO; 
margin: 0 1%; 
width: 58%; 
height: 100%; 
float: left; 

} 

#header .right{ 
height: 100%; 


width: 20%; 
background-color: #A AFFO0; 
float: left; 
} 
#nav{ 
height: 30px; 
width: 100%; 
margin: 10px 0; 
background-color: #00BBFF:; 
} 
#main{ 
height: 800px; 
} 
#content{ 
width: 75%; 
height:100%; 
float: left; 
} 
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#content .leftl{ 
width: 40%; 
height: 49%; 
background-color: #CCCCCC; 
float: left; 
margin“bottom: 1%; 
margin right: 1%; 
} 
#content .left2{ 
width: 40%; 
height: 49%; 
background-color: #CCCCCC; 
float: left; 
clear: left; 
margin right: 1%; 
} 
#content .right1 { 
width: 59%; 
height: 49%; 
float: right; 
margin“bottom: 1%; 
background-color: #CCCCCC; 
} 
#content .right2{ 
width: 59%; 
height: 49%; 
float: right; 
background-color: #CCCCCC; 
} 
#aside{ 
width: 24%; 
height: 100%; 
float: right; 
margin left: 1%; 
backsground-color: #FFFFOO; 
} 
</style> 
</head> 
<body> 
<div 1d="header"> 
<div class='"left"></div> 
<div class="center"> </div> 
<div class="right" > </div> 
</div> 
<div id="nav"></div> 


<div 1d="main" > 
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<div 1d="content"> 
<div class='"left1"></div> 
<div class="right1"></div> 
<div class="]left2"></div> 
<div class="right2"></div> 


</div> 
<div id="aside"></div> 
</div> 
</body> 
</html> 
【章节 练习 】 


， 例 模型 包括 哪 四 部 分 ? 
， 何 述 标准 盒 模型 与 下 盒 模型 的 区 别 ，CSS 如 何 设置 使 用 哪 种 盒 模型 ? 


























边框 的 简写 属性 包括 哪 3 个 ? 
写 出 “box-shadow: 10px 5px 5px 10px blue inset;” 代 表 的 意思 。 
写 出 清除 浮动 的 三 种 方式 。 

上 机 练习 】 

运用 本 章 所 学 知识 绘制 图 8-36。 
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图 8-36 上 机 练习 
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随 着 移动 互联 网 时 代 昌 


设备 特别 是 智 





四 受 节 二 必 量 看 明 昌 王国 








的 到 来 ， 仅 用 计算 机 
工具 








能 手机 成 为 





一 
上 入 





br 





开发 的 潮流 。 
本 章 学 习 目 标 : 
> 了 解 移动 开发 与 响应 式 的 基本 概念 。 
> 了 解 视 口 〈viewport) 的 重要 概念 。 
> 了 解 移动 开发 常用 的 头 部 标签 与 CSS 设置 。 








> 熟练 使 
通过 本 章 内 容 的 学 习 ， 读 者 所 
幕 设备 并 进行 响应 式 的 变化 ， 证 网 冯 


9.1 


幕 的 分 辨 率 、 像 素 的 基础 名 


很 多 ， 却 是 理解 问题 的 关键 。 























] 媒 体 查 询 实 现 响 应 式 开 发 。 


















































移动 开发 基础 知识 
要 学 习 移动 开发 ， 首 先 要 知道 移动 








判 作 的 网 站 将 不 有 
占 达到 更 好 的 用 户 体验 效果 。 








浏览 网 页 已 经 不 能 满足 月 



























































上 识 、 视 口 








911 U0O000000 


媒体 设备 ， 即 各 利 











的 基本 概念 等 。 





的 实际 效果 ， 所 以 关于 媒体 设备 的 一 些 基 本 概念 ， 还 是 有 必要 了 解 。 








1. 屏幕 宽 高 (device-width/device-height) 


设备 宽度 (device-width)〉 指 当前 设备 的 屏幕 宽度 。 
不 变 的 ， 而 不 同 设备 的 屏幕 宽度 又 是 各 不 相同 的 。 











2.， 泻 染 窗口 的 宽 高 


宽度 〈width) 指 浏览 器 窗口 的 宽度 。 对 于 桌面 操作 系统 来 说 ， 就 是 当 








v2 tx 


过 吊 ， 


























局 限于 计算 机 ， 而 能 够 自 


开发 中 会 遇 到 的 各 种 基本 概念 ， 比 如 屏幕 的 宽 高 、 
这 些 知识 点 在 开发 过 程 中 或 许 不 会 用 到 


每 个 设备 的 屏幕 宽度 是 
设备 高 度 (device-height) 同 理 。 








户 的 需求 ， 各 种 移动 
前 端 工程 师 应 该 紧 跟 时 代 淹 流 ， 投 入 移动 开发 与 响应 式 








动 识 别 各 种 屏 


























Fh 不 同 的 展示 设备 ， 每 个 设备 的 大 小 、 尺 寸 、 分 辩 率 都 将 影响 网 页 展示 


esd 


夺 








固 




















前 浏览 器 的 宽度 











(并 且 是 包括 滚动 条 的 )。 最 小 宽度 (min-width ) 表示 当前 元 素 允 许 的 最 小 宽度 ， 最 大 宽度 


(max-width〉 表示 
高 度 (max-height) 同 理 。 


EN 














3. 设备 方向 (orientation) 


设备 方向 表示 当前 设备 所 处 的 方向 是 水 平方 向 还 是 垂直 方向 。 但 是 ， 取 值 并 不 是 用 





水 平 或 垂直 表示 ， 只 有 两 个 可 选 值 : portrait 和 
1) portrait: 表示 当前 页 面 


垂直 )。 























landscape。 两 个 值 的 





























区 别 如 下 : 

















区 域 的 高 度 大 了 





前 元 素 允 许 的 最 大 宽度 。 高 度 (height)、 最 小 高 度 (min-height)、 最 大 























或 等 于 宽度 (也 就 是 通常 人 们 理解 的 设备 
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2) landscape: 除 portrait 值 情况 外 ， 都 是 landscape。 

4. 设备 分 辨 率 (resolution ) 

设备 分 辩 率 表示 当前 设备 的 分 辨 率 大 小 ， 可 以 使 用 整数 表示 分 辩 率 的 取 值 ， 单 位 为 
dpi。 该 特性 接受 min 和 max 前 级 ， 因 此 可 以 派生 出 min-resolution 和 max-resolution 两 个 媒 
体 特 性 。 
































代码 示例 如 下 : 
resolution:960dpi; /* 屏幕 分 辨 率 为 960dpi */ 
min-resolution:300dpi; /* 屏幕 最 小 分 辨 率 为 300dpi */ 
max-resolution:1080dpi; /* 屏幕 最 大 分 辨 率 为 1080dpi */ 





9.12 DUOO0OO0ODO0D0 

从 开始 接触 CSS， 人 们 就 了 解 了 一 种 最 常用 的 单位 一 一 px (像素 )。 那 1px 真 的 等 于 
lpx 吗 ? 这 人 句 话 看 上 去 是 个 病句 ， 但 确实 存在 这 种 情况 ， 因 为 在 网 页 开发 过 程 中 有 很 多 种 像 
素 类 型 ， 之 前 接触 的 都 是 CSS 像素 。 下 面 介绍 各 种 像素 类 型 。 

1. 设备 物理 像素 

设备 物理 像素 ， 又 称 设备 像素 或 物理 像素 。 一 个 物理 像素 是 显示 器 (手机 屏幕 ) 上 最 小 
的 物理 显示 单元 ， 即 设备 能 控制 显示 的 最 小 单位 。 可 以 把 这 些 像素 看 作 屏 幕 上 一 个 个 的 点 。 

2. 设备 独立 像素 

设备 独立 像素 〈 也 称 为 密度 无 关 像 素 )， 可 以 认为 是 计算 机 坐标 系统 中 的 一 个 点 ， 这 个 
点 代表 一 个 可 以 在 程序 中 使 用 的 虚拟 像素 。 这 个 虚拟 像素 的 大 小 与 屏幕 上 的 一 个 像素 点 (也 
就 是 物理 像素 ) 没有 关系 ， 可 以 通过 一 定 的 转换 关系 将 几 个 物理 像素 点 转换 为 一 个 虚拟 像素 
(也 就 是 设备 独立 像素 )。 

因此 ， 物 理 像素 和 设备 独立 像素 之 间 存 在 着 一 定 的 对 应 关系 ， 即 设备 像素 比 〈(dpr)。 当 
dpr 为 1 时， 设备 独 立 像素 = 设备 物理 像素 。 

3. 设备 像素 比 

设备 像素 比 就 是 设备 物理 像素 与 设备 独立 像素 的 比例 ， 存 在 如 下 转换 关系 : 

设备 像素 比 = 物理 像素 / 设备 无 关 像素 










































































































































































































































































































































































4. CSS 像素 

CSS 像素 是 一 个 相对 单位 。 对 于 不 同 屏幕 ， 其 实际 像素 大 小 不 同 。 当 页 面 没 有 缩放 时 ， 
CSS 像素 等 于 设备 独立 像素 。 

注意 : 通常 在 移动 开发 中 CSS 的 1px 并 不 等 于 设备 的 1px。 因 此 ， 需 要 通过 视 口 
(viewport ) 的 设置 ， 让 1px 的 CSS 像素 等 于 1px 的 设备 独立 像素 ， 进 而 等 于 1px 的 设备 物 
理 像 素 。 也 就 是 说 ， 合 理 地 设置 viewport， 才 能 处 理 好 这 些 像 素 之 间 的 转换 关系 。 







































































9.1.3 viewport 口 口 


移动 前 端 中 常 说 的 viewport《〈 视 口 ) 就 是 浏览 器 显示 页 面 内 容 的 屏幕 区 域 。 首 先 了 解 以 
下 几 个 概念 。 
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1. layout viewport 布局 视 口 ) 

一 般 移动 设备 的 浏览 器 都 默认 设置 了 一 个 viewport 元 标签 ， 定义 一 个 虚拟 的 layout 
viewport《〈 布 局 视 口 )， 用 于 解决 早期 的 页 面 在 手机 上 显示 的 问题 。iOS 和 Android 基本 都 将 
这 个 视 口 分 辨 率 设置 为 980px， 所 以 计算 机 上 的 网 页 基本 能 在 手机 上 呈现 ， 只 不 过 元 素 看 上 
去 很 小 ， 一 般 默 认可 以 通过 手动 缩放 网 页 。 

2. visual viewport 〈 视 觉 视 口 ) 和 物理 像素 

visual viewport〈 视 觉 视 口 ) 指 设备 物理 屏幕 的 可 视 区 域 。 物 理 像素 指 屏幕 显示 器 的 物理 
像素 ， 同 样 尺寸 的 屏幕 ， 像 素 密度 大 的 设备 ， 硬 件 像素 会 更 多 。 

3. ideal viewport 〈 理 想 视 口 ) 和 设备 独立 像素 

ideal viewport《〈 理 想 视 口 ) 通常 是 指 屏幕 分 辨 率 。 设 备 独 立 像素 跟 设 备 的 硬件 像素 无 
关 。 一 个 设备 独立 像素 在 任意 像素 密度 的 设备 屏幕 上 都 占据 相同 的 空间 。 

在 计算 机 中 ， 可 以 通过 设置 去 调整 屏幕 的 分 辨 率 ， 也 就 是 调整 理想 的 视 口 显示 。 而 移动 
端 手机 屏幕 通常 不 可 以 设置 分 辨 率 ， 一 般 都 是 设备 厂家 默认 设置 的 固定 值 。 换 句 话 说， 设备 
独立 像素 的 值 就 是 理想 视 口 〈 也 就 是 分 辩 率 ) 的 值 。 

4. CSS 像素 与 设备 独立 像素 

CSS 像素 是 用 于 页 面 布 局 的 单位 。 样 式 的 像素 尺寸 (如 width: 100px) 是 以 CSS 像素 为 
单位 指定 的 。CSS 像素 与 设备 独立 像素 的 比例 即 为 网 页 的 缩放 比例 ， 如 果 网 页 没有 缩放 ， 那 
么 一 个 CSS 像素 就 对 应 一 个 设备 独立 像素 。 

5. 视 口 〈viewport) 的 设置 
为 了 保持 一 个 CSS 像素 等 于 一 个 设备 独立 像素 ， 通 常 需要 在 网 页 中 通过 代码 去 设置 视 
的 大 小 。 基 本 语法 如 下 : 
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<meta name='"viewport"”content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum— 
scale=1,user—scalable=no"/> 


代码 解释 如 下 : 

(1) width=device-width 

width 属性 用 于 控制 layout viewport 的 宽度 ，layout viewport 宽度 默认 值 是 设备 厂家 指定 
的 。 将 width 设 为 device-width， 表 示 让 视 口 宽度 等 于 屏幕 设备 宽度 ， 也 就 是 将 layout 
viewport 的 宽度 设置 ideal viewport 的 宽度 。 当 网 页 缩放 比例 为 100% 时 ， 一 个 CSS 像素 就 对 
应 一 个 设备 独立 像素 。 

(2) initial-scale=1.0 

initial-scale 用 于 指定 页 面 的 初始 缩放 比例 ，initial-scale=l 让 页 面 的 初始 缩放 比 为 1， 也 
就 是 上 面 提 到 的 将 layout viewport 的 宽度 设置 为 ideal viewport 的 宽度 ， 进 而 让 一 个 CSS 像 
素 就 对 应 一 个 设备 独立 像素 。 

(3) maximum-scale=1 

设置 用 户 的 最 大 缩放 比 为 1， 也 就 是 不 允许 用 户 放 大 窗口 。 

(4) minimum-scale=1 

设置 用 户 的 最 小 缩放 比 为 1， 也 就 是 不 允许 用 户 缩 小 窗口 。 


($) user-scalable=no 




















































































































133 


Web 前 端 学 习 笔 记 : HTML5+CSS3+JavaScript 





直接 设置 用 户 禁 止 缩放 (在 iOS 10 中 的 Safari 浏览 器 失效 )。 


注意 : 上 述 视 口 的 讲解 涉及 太 多 的 概念 性 问题 ， 对 于 初学 者 来 说 可 能 有 一 定 的 难度 ， 不 
过 只 需要 熟练 记 住 设置 viewport 的 meta 语句 ， 并 且 在 移动 开发 的 页 面 中 设置 meta 语句 即 
可 。 其 他 理解 性 内 容 ， 随 着 学 习 的 深入 ， 自 然 可 以 有 效 理解 。 























9.2 移动 开发 常用 设置 
了 解 移 动 开发 过 程 中 需要 设置 的 第 一 条 meta 语句 后 ， 本 节 正 式 步 入 到 移动 页 面 的 开 
发 。 除 了 视 口 的 设置 ， 还 需要 设置 哪些 内 容 呢 ? 下 面 介 绍 在 移动 开发 过 程 中 可 能 用 到 的 一 些 
设置 语句 。 
921 000000000000 
<meta> 标 签 的 相关 属性 在 之 前 的 章节 已 经 学 习 过 ， 此 处 不 上 
些 移动 开发 中 用 到 的 <meta> 标 签 。 
1) 禁止 设备 对 疑似 手机 号 或 邮箱 进行 识别 ， 取 消 单 击 拨打 电话 等 事件 。 代 码 如 下 : 


































































































a 
| 由 
ll 

ul 

AS 

> 





， 现 在 直接 来 看 一 





















































<meta name='"format-detection"content="telephone=no,email=no'"/> 





2) iOS 添加 网 页 到 主屏 幕 时 ， 生 成 WebAPP 的 标题 。 代 码 如 下 : 


<meta name="apple-mobile-web-app-title" content=" 我 的 第 一 个 WebAPP"> 








3) iOS 添加 网 页 到 主屏 幕 时 ，WebAPP 的 icon 图 标 。 代 码 如 下 : 


<link rel="apple -touch-icon precomposed" href=" http://www.jredu100.com/favicon.ico" /> 






































4) iOS 添加 网 页 到 主屏 幕后 ， 启 用 WebAPP 全 屏 模式 ， 删 除 顶 端 地 址 栏 和 底部 工 
L 栏 。 代 码 如 下 : 





Vy 


<meta name="apple mobile web-app—capable" content="yes" /> 


5) iOS 添加 网 页 到 主屏 幕 时 ，WebAPP 顶部 状态 的 样式 。 
> black: 黑色 。 
> default: 默认 白色 。 

> black-translucent( 半 透明 ): 网 页 内 容 充满 整个 屏幕 ， 顶 部 状态 栏 会 遮挡 网 页 头 部 。 
代码 如 下 : 
































<meta name="apple mobile web-app- status—bar—style" content="black-translucent"> 


6) 设置 浏览 器 使 用 edge 和 chrome 引擎 去 编译 网 页 。 代 码 如 下 : 





<meta http-equiv="X-UA-Compatible'" content="IE=edge,chrome=1"/> 





a 


| 新 都 要 请 求 最 新 数据 。 代 码 如 下 : 

















7) 设置 浏览 器 过 期 时 间 ，-1 表示 时 刻 过 期 ， 及 每 次 局 
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<meta http-equiv="Expires" content="—1"> 


8) 是 否 设 置 浏览 器 缓存 ， 否 。 代 码 如 下 : 


<meta http-equiv="Cache-Control' content="no-cache'"> 


9) 是 否 从 本 机 读 取 缓存 文件 ， 否 。 代 码 如 下 


<meta http-equiv="Pragma" content="no-cache"> 


922 U0000000 CSS00 
除了 需要 在 头 部 设置 一 些 配置 语句 外 ， 在 移动 开发 过 程 中 ， 由 于 手机 浏览 器 没有 计算 机 






































浏览 器 强大 的 功能 和 字 
几 种 情况 。 
































体 文 持 ， 所 以 需要 对 一 些 默 认 的 CSS 效果 进行 设置 。 主 要 包含 如 下 





1. 手机 端 字 体 选择 
中 文字 体 : 一 般 手机 均 不 支持 微软 雅 黑 ， 中 文字 体 无 须 设置 ， 使 用 手机 默认 即 可 。 
英文 字体 : 一 般 选择 font-family:Helvetica。 





代码 如 下 : 
























































font-family: helvetica sans-serif; 


2， 禁止 选中 文本 如 无 文本 选中 需求 ， 此 为 必 选 项 ) 
手机 端 禁止 长 按 选 中 。 
计算 机 端 禁 止 鼠 标 选 择 。 











代码 如 下 : 


span{ 


-Webkit-user-select: none; 


-moz-user-select: none; 


-ms-user-select: none; 


} 


3. 去 除 表 单 默 认 外 观 ， 手 机 、 计 算 机 均 可 使 用 


代码 如 下 : 


Input{ 


appearance: 


none; 


-Webkit-appearance: none; 


-moz appearance. DOne， 


} 


4. 禁止 长 按 链接 与 图 片 弹出 菜单 


代码 如 下 : 


Img,a{ 
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-Webkit-appearance:none; 


?3 网 页 布局 方式 介绍 


在 网 页 的 开发 过 程 中 ， 网 页 布局 可 以 说 是 最 重要 的 一 个 环节 。 布 局 合理 ， 则 事半功倍 ; 
布局 不 合理 ， 则 事倍功半 。 因 此 ， 选 择 合适 的 网 页 布局 将 是 非常 重要 的 一 个 环节 。 本 节 主 要 
介绍 网 页 中 常用 的 布局 方式 ， 并 重点 介绍 一 种 新 兴 的 响应 式 布局 。 


931 UOO0UOO000 

网 页 的 布局 方式 主要 有 三 种 : 固定 布局 、 流 体 布局 和 弹性 布局 。 弹 性 布局 是 新 兴 的 一 种 
布局 方式 ， 将 在 第 10 章 进行 详细 讲解 。 下 面 先 了 解 固定 布局 和 流体 布局 。 

1. 国定 布局 

从 名 字 可 以 看 出 ， 固 定 布局 是 指 网 页 中 每 块 内容 的 宽 高 都 是 由 固定 的 像素 宽度 值 确定 ， 
同时 这 些 内 容 区 块 的 位 置 也 是 固定 的 ， 所 以 不 管 屏幕 大 小 如 何 变 化 ， 用 户 看 到 的 都 是 固定 宽 
度 的 内 容 。 
图 9-1 展示 的 是 一 个 固定 宽度 布局 的 基本 轮廓 。 轮 廓 里 面 的 三 列 宽度 分 别 是 520px、 
200px 和 200px。960px 已 经 成 为 现代 Web 设计 的 标准 ， 因 为 大 多 数 用 户 被 假定 为 使 用 
1024px*768px 分 辨 率 。 
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520px 200px 200px 





图 9-1 固定 布局 示意 图 


2. 流体 布局 
流体 布局 也 称 为 流动 布局 ， 是 自 适应 布局 的 一 种 。 其 实现 方法 就 是 将 大 多 数 元 素 区 块 都 
设 成 百分比 宽度 ， 而 不 是 用 具体 的 像素 单位 ， 这 样 可 以 让 页 面 根据 用 户 的 屏幕 和 浏览 器 窗 
大 小 自 适 应 调整 。 
图 9-2 是 一 个 简单 流动 (流体 ) 布局 的 轮廓 。 虽 然 有 些 设计 师 可 能 给 流动 布局 中 某 些 元 
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素 设置 了 固定 宽度 ， 如 margin， 但 是 只 要 主体 元 素 是 百分比 宽度 ， 就 可 以 让 布局 自 适应 各 种 


分 辩 率 。 


图 9-2 流体 布局 示意 图 








932 0000000 

无 论 是 固定 布局 还 是 流体 布局 ， 都 存在 着 自己 的 局 限 性 。 针 对 这 个 问题 ， 响 应 式 布局 正 
式 诞生 。 

响应 式 布局 就 是 一 个 网 站 能 够 兼容 多 种 终端 ， 而 不 是 为 每 种 终端 做 一 个 对 应 的 网 站 。 这 
种 布局 主要 是 为 改善 移动 互联 网 的 浏览 体验 而 诞生 的 。 

1， 响 应 式 布局 优点 

1) 面 对 不 同 分 辨 紊 设备 ， 展 示 不 同 效果 的 网 站 ， 灵 活性 强 。 

2) 能 够 快捷 解决 多 设备 显示 适应 问题 ， 而 不 需要 做 计算 机 站 与 手机 站 。 

2.， 响应 式 布 局 缺点 

1) 兼容 各 种 设备 工作 量 大 ， 效 率 低 下 《但 相 比 于 制作 计算 机 站 + 手机 站 ， 还 是 快速 
很 多 )。 

2) 代码 累 歼 ， 会 出 现 隐 藏 无 用 的 元 素 ， 使 页 面 加 载 时 间 变 长 。 

3. 响应 式 的 实现 方式 

响应 式 布局 没有 固定 的 要 求 ， 只 要 能 实现 计算 机 站 与 手机 站 的 不 同 效果 显示 ， 都 可 以 称 
为 响应 式 网 站 。 基 于 这 个 原则 ， 流 体 布局 其 实 本 身 就 是 响应 式 布局 之 一 ， 除 此 之 外 ， 响 应 式 
还 可 以 通过 如 下 几 种 途径 实现 。 

1) 媒体 查询 。 

2) 流体 布局 。 

3) 弹性 布局 。 

4) 通过 JavaScript、JQuery 进行 判断 来 显示 不 同 的 布局 页 面 。 

5)〉 Bootstrap 等 第 三 方 框架 。 
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"4 媒体 查询 实现 响应 式 


























实现 响应 式 布 局 的 方式 有 很 多 种 ， 但 是 如 果 使 用 JavaScript 实现 页 面 响应 式 跳 转 ， 会 造 


成 非常 浩大 的 工程 量 。CSS3 
开发 过 程 中 的 主要 选择 。 
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代码 ， 进 而 在 不 同 的 媒体 设备 上 展示 不 同 的 档 
媒体 查询 主要 是 使 月 





























E 出 的 媒体 查询 成 为 了 实现 响应 式 设计 的 核心 思想 ， 也 是 实际 
























































媒体 查询 是 CSS3 新 推出 的 一 种 实现 响应 式 查 询 的 方式 ， 无 须 使 用 JavaScript 即 可 快速 
实现 响应 式 。 顾 名 思 义 ， 媒 体 查 询 就 是 通 

















过 判断 媒体 查询 的 设备 类 型 ， 而 执行 不 同 的 CSS 





起 了 








二 





























是 否 执行 这 段 CSS 代码 。 基 本 语法 如 下 : 


@media[notlonly] type [and][expr]{ 


rules 


} 
代码 解释 如 下 : 





(1) and、not、only: 逻辑 关键 字 


逻辑 关键 字 配 合 紧 跟 的 媒体 类 型 发 挥 作 | 




















Screen 表示 只 检测 屏幕 宽度 而 不 关心 其 他 媒体 设备 的 属性 。 

















(2) type: 媒体 类 型 











和 screen，all 表示 检测 所 有 媒体 设备 ; 


种 设备 。 











(3) expr: 媒体 表达 式 

















媒体 表达 式 中 用 的 属性 就 是 9.1.1 节 
检测 屏幕 的 宽度 处 于 某 个 范 也 
































媒体 设备 的 类 型 有 很 多 ， 大 家 可 以 参考 帮助 文档 自行 了 解 。 网 页 开发 中 最 常用 的 有 all 











昌 @media 关键 字 来 实现 ， 通 过 检测 媒体 类 型 是 否 符合 要 求 ， 而 确定 











] ， 如 not screen 表示 不 检测 屏幕 宽度 ;only 
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(4) rules: CSS 代码 
当 上 述 设置 的 媒体 设备 查询 语句 生效 以 后 ， 需 要 执行 的 CSS 代码 。 与 普通 的 CSS 选择 


















































screen 表示 只 检测 媒体 设备 的 屏幕 宽度 而 不 关心 是 哪 





解 的 各 种 媒体 设备 常用 属性 ， 比 如 最 常用 的 就 是 
之 间 : (min-width:640px) and (max-width: 980px)。 





























器 、 语 句 写法 完全 相同 ， 只 是 如 果 媒 体 设 备查 询 不 符合 要 求 将 不 执行 。 























了 解 了 媒体 查询 的 语句 以 后 ， 我 们 来 看 一 段 完 整 的 代码 示例 ; 








@media only screen (min-width:640px) and (max-width: 980px) { 


body{ 


background-color': red; 


} 
} 





代码 含义 : 只 检测 屏幕 的 宽度 ， 而 且 当 屏 

















幕 的 宽度 大 于 或 等 于 640px、 小 于 或 等 于 





980px 时 ， 媒 体 碍 询 将 生效 ， 并 执行 其 中 的 CSS 代码 。 
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942 DO0000000000 
忆 于 CSS 的 使 用 方式 有 三 种 ， 所 以 可 以 在 三 种 情况 下 分 别 使 用 媒体 查询 。 
1. 直接 在 CSS 文件 中 使 用 
代码 如 下 : 
<style type="text/css"> 
/ 没有 经 过 媒体 查询 限制 的 CSS 
@media 类 型 and (条 件 1) and (条 件 2){ 
/ 媒体 查询 生效 才 会 执行 的 CSS 




































































} 
</style> 
2. 使 用 import 导入 
代码 如 下 : 
@import url("css/media.css") all and (max-width:980px); // 当 所 有 设备 的 宽度 小 于 980px 时 ， 才 会 
使 用 import 导入 CSS 文件 
3. 使 用 link 链接 ，media 作为 属性 用 于 设置 查询 方式 
代码 如 下 : 
<link rel="stylesheet" href="css/media.css" media="all and (max-width:980px)" /> // 当 所 有 设备 的 
宽度 小 于 980px 时 ， 才 会 使 用 link 链接 CSS 文件 






























































注意 : 媒体 查询 的 优先 级 与 普通 CSS 完全 相同 ， 因 此 当 使 用 媒体 查询 时 ， 一 定 要 将 煤 
查询 的 样式 放 在 默认 样式 之 后 ， 否 则 媒体 查询 会 被 默认 样式 覆盖 ， 也 就 无 法 针对 不 同 设备 
行 变化 。 


9.5 ”章节 案例 ， 媒 体 查询 实例 练习 


通过 上 述 学 习 ， 己 经 知道 了 媒体 查询 的 基本 使 用 方式 ， 但 是 对 于 媒体 查询 的 综合 应 用 可 
能 还 存在 问题 。 下 面 制作 一 个 简单 的 响应 式 布局 的 页 面 ， 来 看 看 媒体 查询 是 如 何在 不 同 的 设 
备 上 ， 显 示 不 同 的 样式 。 显 示 效 果 如 图 9-3 和 图 9-4 所 示 ， 当 屏幕 宽度 大 于 1200px 时 ， 保 
持 计算 机 站 的 样式 ， 当 屏幕 宽度 小 于 640px 时 ， 变 为 手机 站 的 样式 。 

【案例 代码 】 

HTML5 文件 中 的 代码 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="../css/ 响 应 式 布局 Demo.css" /> 
</head> 
<body> 
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Headerl Headerl Headerl Headerl Headerl 








left 
left center right 
center 
right 
图 9-3 浏览 器 宽度 在 1200px 以 上 的 布局 效果 图 9-4 浏览 器 宽度 在 640px 以 下 时 的 布 











<header id="head"> 
<ul> 
<li >Header1 </li> 
<li>Headerl1 </li> 
<li>Header1 </li> 
<li>Header1 </li> 
<]i>Headerl</i> 
</ul> 
<div>icon</div> 
</header> 
<section 1d="main"> 
<div class="]left">left</div> 
<div class="center">center</div> 
<div class="right" >right</div> 
</section> 
<footer 1d="foot" >footer</footer> 
</body> 
</html> 


CSS 文件 中 的 代码 如 下 : 
*{ 


margin: Opx; 
padding: Opx; 
text-align: center; 
font-size: 48px; 


} 

#head,#foot,#main{ 
height: 100px; 
width: 1200px; 


backsground-color: burlywood; 
line-height: 100px; 


140 





margin: 0 auto; 
min-width: 320px; 
} 
#head ul{ width: 80%; } 
#head ul li{ 
float: left; 
width: 20%; 
text-align: center; 
list-style: none; 
font-size: 20px; 
} 
#head div{ 
display: none; 
font-size: 20px; 
height: 30px; 
width: 100px; 
background-color: yellow; 
float: right; 
margin-top: 35px; 
line—height: 30px; 
} 
#main{ 
height: auto; 
margin: 10px auto; 
overflow: hidden; 
} 
.left,.center, .right{ 
height: 600px; 
line—height: 600px; 
float: left; 
width: 20%; 
background-color: yellowgreen; 
} 
.Center{ 
width: 60%; 
border-left: 10px solid #FFFFFF:; 
border-right: 10px solid #FFFFFF:; 


box-sizing: border-box; 


@media only screen and (max-width: 1200px) { 旋 当 
#head, 
#foot, 
#main{ 
width: 100%; 
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屏幕 宽度 大 于 1200px 时 会 执行 的 CSS 代码 
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@media only screen and (max-width: 980px) { /* 当 屏幕 宽度 小 于 980px 时 会 执行 的 CSS 代码 */ 
Tight{ display: none; } 
.left{ width: 30%; } 
.center{ 
width:70%; 
border-right: hidden; 





} 
@media only screen and (max-width: 640px) { /* 当 屏幕 宽度 小 于 640px 时 会 执行 的 CSS 代码 */ 
.left,.center, .right{ 
width: 100%; 
height: 200px; 
line-height: 200px; 
display: block; 











} 

.center{ 
border: hidden， 
border-top: 10px solid #FFFFFF:; 
border-bottom: 10px solid #FFFFFF:; 
height: 600px; 
line-height: 600px; 

} 


#head ul{ display: none; } 
#head div{ display: block; } 
} 


【章节 练习 】 
1. 说 明 以 下 代码 的 含义 。 
<meta name='"viewport"”content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum— 
Scale=l,user-scalable=no'"/> 
. 写 出 禁止 用 户 选 中 文本 的 代码 。 
3. 实现 响应 式 布 局 有 哪儿 种 方式 ? 
写 出 在 宽度 为 980px 时 发 生 改变 的 媒体 查询 基本 语法 。 
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弹性 布局 是 CSS3 新 推出 的 一 种 布局 方式 ， 这 种 布局 方式 现在 已 经 得 到 所 有 主流 浏览 器 
的 支持 ， 可 以 放心 地 使 用 。 弹 性 布局 的 出 现 让 实现 响应 式 布局 变 得 更 加 轻松 方便 ， 本 章节 来 
进行 具体 地 学 习 。 

本 章 学 习 目标 : 

> 了 解 弹性 布局 的 基本 概念 。 























































































































































































































> 熟练 掌握 弹性 布局 的 各 种 属性 的 使 用 。 

> 能 够 熟练 使 用 弹性 布局 实现 网 页 开发 。 

弹性 布局 是 现在 非常 常用 的 布局 方式 之 一 ， 通 过 本 章 的 学 习 ， 读 者 能 够 熟练 地 使 用 弹性 
布局 这 种 新 型 的 布局 方式 ， 并 且 能 够 熟练 地 使 用 弹性 布局 进行 网 页 的 开发 。 









































10.1 弹性 布局 简介 


弹性 布局 又 称 Flex 布局 ， 是 由 W3C 于 2009 年 推出 的 一 种 布局 方式 ， 可 以 简便 、 完 
整 、 响 应 式 地 实现 各 种 页 面 布局 ， 而 且 已 经 得 到 所 有 主流 浏览 器 的 支持 ， 所 以 可 以 放心 
使 用 。 


1011 O00O00000000 
为 了 方便 大 家 更 加 熟练 地 学 习 弹 性 布局 ， 首 先 了 解 两 个 基本 概念 ， 在 接 下 来 的 内 容 中 会 
频繁 提 到 。 
1， 容 器 与 项 目 
容器 (box): 需要 添加 弹性 布局 的 父 元 素 。 
项 目 (item): 弹性 布局 容器 中 的 每 一 个 子 元 素 ， 称 为 项 目 。 
2. 主轴 与 交叉 轴 
主轴 (principal axis): 在 弹性 布局 中 ， 通 过 属性 规定 水 平 或 垂直 方向 为 主轴 。 
交叉 轴 (intersecting axle): 与 主轴 重 直 的 另 一 方向 ， 称 为 交叉 轴 。 


1012 D0O000000000000 

弹性 布局 使 用 非常 简单 ， 但 是 依然 有 一 些 注意 事项 需要 大 家 重视 。 在 使 用 弹性 布局 时 一 
定 需要 注意 以 下 几 点 ; 

1) 给 父 容器 添加 display: flex/inline-flex; 属 性 ， 即 可 使 容器 内 容 采 用 弹性 布局 显示 ， 而 
不 遵循 常规 文档 流 的 显示 方式 。 

2) 容器 添加 弹性 布局 后 ， 仪 仪 是 容器 中 的 项 目 采 用 区 
的 定位 方式 依然 遵循 常规 文档 流 。 















































































































































































































































性 布局 ， 而 容器 本 身 在 文档 流 中 
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3) display:flex; 容器 添加 弹性 布局 后 ， 显 示 为 块 级 元 素 。 

4) display:inline-flex; 容器 添加 弹性 布局 后 ， 显 示 为 行 级 元 素 。 

5) 将 父 容器 设 为 弹性 布局 后 ， 子 项 目的 float、clear 和 vertical-align 属性 将 失效 ， 但 
position 属性 依然 生效 。 


1013 UUO0OU0OO000D0 
了 解 了 一 些 弹性 布局 的 基本 概念 和 注意 事项 后 ， 接 下 来 看 一 个 使 用 弹性 布局 的 代码 示 
例 。 可 以 看 到 ， 弹 性 布局 使 用 起 来 非常 简单 ， 只 需要 给 父 容器 添加 “display:flex” 即 可 。 


























































































































在 当前 容器 内 使 用 弹性 布局 ， 代 码 示例 如 下 : 









































<IDOCTYPE html> 
<html> 
<head> 
<style> 
#box{ 
width: 200px; 
height: 200px; 
background-color: yellow; 
display: flex; 入 将 当前 元 素 设置 为 弹性 布局 。 不 添加 此 行 代码 的 效果 图 
如 图 10-1 所 示 采 用 常规 文档 流 布 局 ， 添 加 此 行 代码 的 效果 图 如 图 10-2 所 示 采 用 弹性 布局 沁 





















































} 
#box div{ 
width: SOpx; 
height: SOpx; 
backsground-color: blue; 
color: white; 
font-size: 20px; 
} 
</style> 
</head> 
<body> 


<div 1d="box"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
</div> 
</body> 
</html> 


pe 


当 没有 添加 “display:flex;” 时 ，div 内 部 依然 采用 常规 的 文档 流 方式 进行 布局 ， 也 就 是 
每 个 子 div 将 显示 为 块 状元 素 ， 上 下 排列 。 

而 当 给 div 添加 了 “display:flex” 后 ，div 内 容 将 采用 弹性 布局 的 方式 进行 排列 ， 每 个 子 
div 将 不 再 按照 常规 文档 流 的 上 下 排列 ， 而 是 默认 成 了 一 行 显示 。 
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口 css3 新 特性 


GG | © 127.0.0.1:8020/ 教 材 /10/01/01- 弹 性 布局 demo.html?_hbt=1511936815127 














图 10-1 未 添加 弹性 布局 将 采用 常规 文档 流 











中 Css3 新 竺 性 


CG | © 127.0.0.1:8020/ 教 材 /10/01/01- 弹 性 布局 demo.html?_hbt=1511936815127 


3 4 











图 10-2 添加 弹性 布局 将 打破 常规 文档 流 


了 解 了 弹性 布局 的 基本 效果 后 ， 接 下 来 探讨 一 下 如 何 设置 子 项 目 在 父 容器 中 的 排列 ， 
这 就 需要 用 到 弹性 布局 的 各 种 属性 。 为 了 方便 讲解 ， 后 续 所 有 代码 将 继续 使 用 上 述 代码 进 
行 演示 。 


















































10.2 作用 于 容器 的 属性 


在 简单 了 解 弹性 布局 后 ， 来 详解 一 下 弹性 布局 中 使 用 的 12 个 属性 。 这 12 个 属性 分 为 两 
类 ，6 个 作用 于 父 容器 ， 另 外 6 个 作用 于 子 项 目 。 首 先 介绍 作用 于 父 容器 的 6 个 属性 。 


注意 ; 演示 中 将 以 主轴 方向 为 从 左 到 右 来 介绍 这 些 属性 ， 















































10.2.1 flex- directionl DO0OO0OO 


该 属性 规定 主轴 的 方向 《〈 即 项 目的 排列 方向 )。 其 可 选 属性 值 有 四 个 。 
1) row《〈 默 认 值 ): 主轴 为 水 平 ， 方 向 从 左 到 右 。 

2) row-reverse: 主轴 为 水 平 ， 方 向 从 右 到 左 。 

3) column: 主轴 为 垂直 ， 方 向 从 上 到 下 。 

4) column-reverse: 主轴 为 垂直 ， 方 向 从 下 到 上 。 

示意 图 如 图 10-3 所 示 。 
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图 10-3 flex-direction 属性 





10.2.2 flexc wrap 0 00O 
该 属性 用 于 规定 子 元 素 在 容器 内 如 何 换行 。 其 可 选 属性 值 有 三 个 。 





























1) nowrap 〈 默 认 ): 不 换行 。 当 容器 宽度 不 够 时 ， 每 个 项 目 会 被 挤 压 宽度 。 
2) wrap: 换行 显示 ， 并 且 第 一 行 在 容器 最 上 方 。 











A 


3) wrap-reverse: 换行 显示 ， 并 且 第 一 行 在 容器 最 下 方 。 
将 外 面 的 父 容 器 宽度 改 为 100px， 效 果 如 图 10-4 所 示 。 


























图 10-4 flex-wrap 属性 





10.2.3 flex-flow] DOO0OO 


该 属性 是 flex-direction 属性 和 flex-wrap 属性 的 简写 形式 ， 默 认 值 为 row nowrap， 其 他 
属性 值 不 再 歼 述 。 


















































10.2.4 justify- conten 由 DODDOD 
该 属性 规定 项 目 在 主轴 线 上 的 对 齐 方式 。 其 可 选 属性 值 有 五 个 。 
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1) flex-start〈 默 认 值 ): 项 目 位 于 主轴 起 点 。 
2) flex-end: 项 目 位 于 主轴 终点 。 


| 


3) center: 居中 。 

4) space-between: 两 端 对 齐 ， 项 目 之 间 的 间隔 都 相等 《开头 和 最 后 的 项 目 ， 与 父 容器 
边缘 没有 间隔 )。 

5) space-around: 每 个 项 目 两 侧 的 间隔 相等 。 同 时 项 目 之 间 的 间隔 比 项 目 与 边框 的 间隔 
大 一 倍 ( 开 头 和 最 后 的 项 目 ， 与 父 容器 边缘 有 一 定 的 间隔 )。 

将 高 度 改 为 120px， 宽 度 改 为 150px， 项 目 宽度 改 为 30px， 结 果 如 图 10-5 所 示 。 


123 4 L234 1234 
pe py 


图 10-$ ”justify-content 属性 































































































10.25 align-itemg] DOODO0000O 

该 属性 规定 项 目 在 交叉 轴 上 的 对 齐 方式 。 其 

1) flex-start: 与 交叉 轴 的 起 点 对 齐 。 

2) flex-end: 与 交叉 轴 的 终点 对 齐 。 

3) center: 与 交叉 轴 的 中 点 对 齐 。 

4) baseline: 根据 项 目的 第 一 行文 字 的 基线 对 齐 〈 文 字 的 行 高 、 字 体 大 小 会 影响 每 行 的 
基线 )。 

5) stretch 〈 默 认 值 ): 如 果 项 目 未 设置 高 度 或 设 为 aato， 则 将 占 满 整个 容器 的 高 度 。 

将 父 容器 的 宽度 改 为 150px， 高 度 改 为 130px， 子 元 素 的 宽度 改 为 50px， 其 中 展示 
baseline 属性 时 将 “1” 和 “3” 的 字体 大 小 做 了 调整 ， 最 终 所 有 属性 值 的 对 齐 效果 如 图 10-6 
所 示 。 


10.2.6 align- contentl DODDODOODOD 

该 属性 规定 每 一 行 或 每 一 列 在 另 一 方向 上 的 对 齐 方式 ， 即 主轴 在 交叉 轴 的 对 齐 方式 。 只 
有 一 行 或 一 列 时 ， 该 属性 无 效 。 其 可 选 属性 值 有 六 个 。 

1) flex-start: 与 交叉 轴 的 起 点 对 齐 。 

2) flex-end: 与 交叉 轴 的 终点 对 齐 。 











选 属性 值 有 五 个 。 
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1 


1 2 
1234 


align-items: 
stretch 








性 








图 10-6 align-items 属 


由 











3) center: 与 交 义 轴 的 中 点 对 齐 。 

4) space-between: 与 交 义 轴 两 端 对 齐 ， 轴 线 之 间 的 间隔 平均 分 布 。 

5) space-around: 每 根 轴线 两 侧 的 间隔 都 相等 。 所 以 ， 轴 线 之 间 的 间隔 比 轴线 与 边框 的 
间隔 大 一 倍 。 

6) stretch (默认 值 ): 如 果 项 目 未 设置 高 度 或 设 为 anato， 则 将 占 满 整 个 容器 的 高 度 〈 占 
满 整 个 交叉 轴 )。 

将 父 容器 的 高 度 设 为 200px， 宽 度 设 为 130px， 子 元 素 的 宽度 设 为 60px， 效 果 如 图 10-7 
所 示 。 
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align-content: 
stretch 


E， 4 











图 10-7 align-content 属性 





10.3 作用 于 项 目的 属性 


10.3.1 orderlDODOODOD 
该 属性 规定 项 目的 排列 顺序 ， 使 用 整数 设置 ， 数 值 越 小 越 靠 前 ， 可 以 为 负 值 。 
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给 “1” 和 “3” 添 加 order 属性 ， 顺 序 变 为 如 图 10-8 所 示 。 











图 10-8 order 属性 





10.3.2 flex-grow[] DDODODO 


该 属性 规定 项 目的 放大 比例 ， 默 认为 0， 即 如 果 存 在 剩余 空间 ， 也 不 放大 。 变 化 如 
10-9 所 示 。 























图 10-9 flex-grow 属性 


10.3.3 flex shrinkl DODODODD 

该 属性 规定 项 目的 缩小 比例 ， 默 认为 1， 即 如 果 空 间 不 足 ， 该 项 目 将 缩小 。 

现在 把 所 有 子 项 目的 宽度 改 为 70px， 父 容器 宽度 不 变 ， 依 然 为 200px， 变 化 如 图 10-10 
所 示 。 




















图 10-10 ”flex-shrink 属性 


10.3.4 flexc basgdj0000D 


该 属性 规定 项 目的 伸缩 基准 值 。 浏 览 器 根据 这 个 属性 ， 计 算 主轴 是 否 有 多 余 空间 来 分 配 
空间 。 例 如 ， 如 果 主 轴 为 水 平 ， 则 设置 这 个 属性 后 ， 相 当 于 设置 了 项 目的 宽度 ， 原 宽度 将 会 
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把 所 有 子 项 目 宽度 改 回 50px， 男 外 单独 为 第 三 个 子 项 
目 设 置 flex-basis:100px， 效 果 如 图 10-11 所 示 。 


10.35 fled] 0DOOO 

该 属性 是 flex-grow、flex-shrink 和 flex-basis 的 简写 ， 
默认 值 为 flex:0 1 auto。 后 两 个 属性 可 选 ， 除 默认 值 外 ， 还 
有 none (00auto) 和 auto (1 1 auto) 两 个 快捷 设置 值 。 


10.3.6 align-sedfIDOUODOD 图 10-11 flex-basis 属性 


该 属性 定义 单个 项 目 自身 在 交叉 轴 上 的 排列 方式 ， 可 以 覆盖 邱 容 器 上 的 align-items 属 
性 。 可 选 属性 值 除 auto 外 ， 与 align-item 相同 。 

1) flex-start: 与 交叉 轴 的 起 点 对 齐 。 

2) flex-end: 与 交 义 轴 的 终点 对 齐 。 

3) center: 与 交叉 轴 的 中 点 对 齐 。 

4) baseline: 与 项 目的 第 一 行文 字 的 基线 对 齐 〈 文 字 的 行 高 、 字 体 大 小 会 影响 每 行 的 
基线 )。 

5) stretch: 如 果 项 目 未 设置 高 度 或 设 为 aato， 则 将 占 满 整个 容器 的 高 度 。 

6) auto (默认 值 ): 表示 继承 父 元 素 的 align-items 属性 。 如 果 没 有 父 元 素 ， 则 等 于 
stretch。 

将 父 容器 的 align-items 设 为 flex-start， 将 第 三 个 子 项 目的 
align-self 设 为 flex-end， 效 果 如 图 10-12 所 示 。 
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【章节 练习 】 
1. 写 出 作用 于 父 容器 的 属性 : 、 























2， 写 出 justify-content 代表 的 含义 ， 并 写 出 E 
3. 写 出 作用 于 子 项 目的 属性 : x 8 


I 
3 
ey 
下 
给 
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图 10-12 align-self 属性 





~» 


4. 写 出 align-content 代表 的 含义 ， 并 写 出 其 所 有 的 属性 值 。 
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3 篇 JavaScript 


DD 110 JavascriptD 








在 前 两 篇 中 ， 读 者 已 经 学 习 了 HTML5 和 CSS3，HTMLS5 负责 定义 网 页 的 内 容 ，CSS3 
负责 美化 网 页 布局 。 接 下 来 要 学 习 的 JavaScript 是 负责 控制 网 页 行为 的 。 

本 章 学 习 目 标 : 

> 熟悉 使 用 JavaScript 的 三 种 方式 。 

> 掌握 JavaScript 中 的 六 种 数据 类 型 。 
> 掌握 JavaScript 中 的 变量 函数 的 使 用 。 
> 掌握 JavaScript 中 的 输入 输出 语句 。 

> 熟悉 JavaScript 中 的 各 种 运算 符 及 优先 级 。 

目前 ，JavaScript 是 世界 上 最 流行 的 脚本 语言 之 一 ， 它 适用 于 个 人 计算 机 、 笔 记 本 式 计算 
机 、 平 板 计 算 机 和 移动 电话 。 学 习 了 本 章 内 容 后 ， 可 以 掌握 JavaScript 的 一 些 基 础 性 知识 。 


























































































































11.1 JavaScript 简介 























JavaScript 是 一 种 直 详 式 脚 本 语言 《代码 不 进行 预 编 译 )， 是 一 种 动态 类 型 、 弱 类 型 、 基 
于 原型 的 语言 ， 内 置 支持 类 型 ， 常 用 来 为 网 页 添加 各 式 各 样 的 动态 功能 ， 为 用 户 提 供 更 流畅 
美观 的 浏览 效果 。 


11.1.1 JavaScipt[] 口 


JavaScript 是 一 种 直译 式 脚本 语言 ， 也 就 是 说 在 运行 前 不 需要 进行 预 编译 ， 而 是 在 网 页 运 
行 过 程 中 由 浏览 器 解释 。 它 的 解释 器 被 称 为 JavaScript 引擎 ， 是 浏览 器 的 一 部 分 。 它 是 广泛 用 
于 客户 端的 脚本 语言 ， 最 早 是 在 HTML 网 页 上 使 用 ， 用 来 给 HTML 网 页 增加 动态 功能 。 

JavaScript 可 以 直接 仍 入 HTML 页 面 , 但 写成 单独 的 JavaScript 文件 有 利于 结构 和 行为 
的 分 离 。 它 还 具有 跨 平 台 特 性 ， 在 绝 大 多 数 浏 览 器 的 支持 下 ， 可 以 在 多 种 平台 下 运行 ， 如 
Windows、Linux、Mac、Android、iOS 等 。 

1995 年 ， 它 在 网 景 (Netscape) 导航 者 浏览 器 〈Navigator) 上 首次 设计 实现 ， 设 计 之 初 
起 名 为 LiveScript， 在 Netscape Navigator 2.0 即将 正式 发 布 前 ，Netscape 公司 将 其 更 名 为 
JavaScript。 

JavaScript 主要 由 三 部 分 组 成 : ECMAScript、DOM (文档 对 象 模型 ) 以 及 BOM (浏览 
器 对 象 模 型 )。ECMAScript 是 JavaScript 的 核心 ， 它 描述 了 该 语言 的 语法 和 基本 对 象 ， 包 括 
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语法 类 型 、 语 句 、 关 键 字 、 保 留 字 、 运 算 符 、 对 象 。 DOM 将 整个 页 面 规划 成 由 节点 层级 构 
成 的 文档 ， 通 过 DOM 可 访问 JavaScript HTML 文档 的 所 有 元 素 。BOM 尚 无 正式 标准 ， 它 使 
JavaScript 有 能 力 与 浏览 器 进行 交互 。 
1112 00OO00D Javascript]0O0DODO 

如 前 面 章 节 所 述 ， 在 页 面 中 使 用 CSS 有 三 种 方式 。 在 JavaScript 中 ， 同 样 也 有 三 种 使 | 
JavaScript 的 方式 ， 分 别 是 在 标签 中 内 骨 JavaScript、 页 面 中 使 用 JavaScript、 引 入 其 1 


JavaScript 文件 。 
1. HTML 标签 中 内 由 JavaScript 




























































































[ 芭 

















<button onclick="JavaScript:alert(Hello JavaScript! )"> 点 我 </button> 


2. HTML 页 面 中 直接 使 用 JavaScript 


<script type=" text/javascript"> 
/1/ JavaScript 代码 
</script> 


3. 引用 外 部 JavaScript 文件 





<script language="JavaScript" src=" JavaScript 文件 路 径 "></script> 


注意 : 
> 页 面 中 JavaScript 代码 与 引用 JavaScript 代码 可 以 误 入 到 HITML 页 面 的 任何 位 置 ， 但 


是 位 置 不 同 会 影响 到 JavaScript 代码 的 执行 顺序 。 

例如 ，<script> 在 body 前 面 ， 会 在 页 面 加 载 之 前 执行 JavaScript 代码 。 

> 页 面 中 JavaScript 代码 使 用 type="text/javascript" 或 language= "JavaScript" 引 用 外 部 的 
JavaScript 文件 ， 但 是 这 两 个 属性 都 可 以 省 略 不 写 。 

> 引用 外 部 JavaScript 文件 的 <script></script> 标 签 必须 成 对 出 现 ， 且 标签 内 部 不 能 
有 任何 代码 。 


11.2 Javascript 的 变量 




















变量 是 学 习 一 门 语 言 的 基础 ，JavaScript 中 有 六 种 基本 数据 类 型 。 由 于 JavaScript 又 是 一 


门 弱 类 型 的 语言 ， 所 以 在 声明 变量 的 时 候 不 需要 声明 变量 的 数据 类 型 ， 统 一 使 用 var 关键 字 
声明 。 变 量 的 具体 类 型 取决 于 变量 所 赋值 的 类 型 。 


1121 00000 
变量 就 是 程序 中 用 于 存储 数据 的 容器 ，JavaScript 中 的 变量 可 以 直接 存放 一 个 值 ， 也 可 
以 存放 一 个 表达 式 。 变 量 有 三 种 声明 方式 。 
1. 使 用 var 声明 的 变量 
使 用 var 声明 的 变量 只 在 当前 函数 作用 域 有 效 ， 在 其 他 作用 域 无 法 使 用 “作用 域 问 题 将 

























































































































































































en 





152 
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在 后 续 章 节 讲 解 )。 基 本 语法 如 下 : 
var widthl = 10; 


2. 不 使 用 var， 直 接 赋 值 声明 变量 
在 JavaScript 中 ， 声 明 变 量 也 可 以 不 使 用 var 关键 字 ， 直 接 通 过 赋值 声明 变量 。 但 是 这 
种 声明 变量 的 方式 默认 为 全 局 变量 ， 在 整个 JavaScript 文件 中 都 有 效 。 基 本 语法 如 下 : 






























































width = 11; 
3. 同一 声明 语句 同时 声明 多 个 变量 
变量 之 间 用 英文 逗号 分 隅 ， 但 是 每 个 变量 需要 单独 进行 赋值 。 例 如 ， 在 下 面 的 式 子 中 ， 
只 有 c 的 值 为 1，a 和 bb 均 为 undefined (未 定义 )。 






































| 





var a,b,c=1; 


但 是 下 列 写法 ，a、b、c 的 值 都 为 1， 代 人 码 如 下 : 























Var a=1,b=1,c=1; 


1122 DO000000000000 

经 过 11.2.1 节 的 学 习 ， 读 者 会 发 现 变 量 的 声明 非常 简单 ， 但 是 在 声明 变量 中 依然 有 很 多 
需要 注意 的 细节 以 及 变量 名 的 一 些 命名 规范 ， 这 些 细节 需要 大 家 牢 牢 记 住 。 

1. 声明 变量 的 注意 事项 

1) JavaScript 中 所 有 变量 类 型 声明 均 使 用 var 关键 字 。 变 量 的 具体 数据 类 型 取决 于 给 变 
量 赋值 的 类 型 。 例 如 : 


// 都 是 使 用 var 声明 的 变量 ， 变 量 a 为 整形 ， 变 量 b 为 字符 
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2) 同一 变量 可 以 进行 多 次 不 同 赋值 ， 每 次 重新 赋值 时 会 修改 变量 的 数据 类 型 。 例 如 : 
/ 变量 a 在 声明 时 为 整形 ， 但 是 在 第 二 次 赋值 时 成 了 字符 串 


var a= 10; 
a= " 杰 瑞 教育 "; 


3) 变量 可 以 使 用 var 声明 ， 也 可 以 直接 声明 。 区 别 是 不 使 用 var， 默 认为 全 局 变量 。 代 
人 码 示 例如 下 : 



























































<script type=" text/javascript"> 



















































































人 # 声 明 一 个 函数 ， 函 数 的 具体 使 用 将 在 第 14 章 讲 解 ， 大 家 稍 作 了 人 解 即 可 */ 
!(function funcO{ 

vara=1; / 函数 中 使 用 var 声明 变量 a 

b=1; / 函数 中 不 用 var 声明 变量 b 
DO; 
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/* console.log 控制 台 打 印 语句 ， 详 见 11.4.5 节 头 






















































































console.log(b); /b 不 用 var 声明 为 全 局 变量 ， 函 数 外 可 以 访问 
console.log(a); // a 使 用 var 声明 为 局 部 变量 ， 只 能 在 函数 中 使 用 ， 函 数 外 访问 报错 
</script> 











4) 同一 变量 名 可 以 多 次 用 var 声明 ， 但 是 并 没有 任何 含义 ， 也 不 会 报错 。 第 二 次 之 后 
的 声明 只 会 被 理解 为 赋值 。 例 如 : 
/ 同一 变量 a， 多 次 使 用 var 声明 ， 不 会 报错 ， 但 是 没有 任何 含义 


var a= 10; 












































var a= "13; 


2. 变量 的 命名 规范 
1) 变量 名 只 能 由 字母 、 数 字 、 下 画 线 、$ 组 成 ， 且 开头 不 能 是 数字 。 
2) 变量 区 分 大 小 号， 大写 字母 与 小 写字 母 为 不 同 变量 。 
3) 变量 名 命名 要 符合 两 大 法 则 之 一 。 

Q 小 驼峰 法 则 : 变量 首 字 母 为 小 写 ， 之 后 每 个 单词 首 字母 大 写 〈 常 用 )。 
@ 匈牙利 命名 法 : 变量 所 有 字母 都 小 号， 单词 之 间 用 下 画 线 分 隔 。 
例如 : 


helloJavaScript 正确 写法 〈 小 驼峰 法 则 ) ~ 
hello_java_script ”正确 写法 (匈牙利 命名 法 ) V 
hellojavascript 错误 写法 X 


4) 在 给 变量 命名 时 应 该 做 到 “ 见 名 知 意 ” 尽量 使 用 能 看 懂 含 义 的 单词 ， 而 不 要 用 没有 
任何 语义 的 字母 或 符号 。 
5) 变量 命名 不 能 使 用 JavaScript 中 的 关键 字 ， 如 NaN、Undefined 等 。 


1123 DUOOOO0OD 
在 JavaScript 中 ， 基 本 数据 类 型 有 很 多 ， 后 面 章节 要 讲解 的 数组 、 正 则 都 算是 数据 类 
型 ， 而 ES6 (JavaScript 的 最 新 标准 ， 后 续 讲 解 ) 也 新 增 了 很 多 种 数据 类 型 。 但 是 ， 一 旦 提 
到 基本 数据 类 型 ，JavaScript 中 只 有 6 种 。 

1. Undefined: 未 定义 
在 JavaScript 中 ， 使 用 var 声明 变量 ， 但 没有 进行 初始 化 赋值 时 ， 结 果 为 Undefined。 如 
果 变 量 没有 声明 直接 使 用 ， 则 会 报错 ， 不 属于 Undefined。 代 码 示 例如 下 : 
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<script type=" text/javascript"> 




































































var a; 
/*console.log 控制 台 打 印 语句 ， 详 见 11.4.5 节 *%/ 
console.log(a); /1/ 使 用 var 声明 变量 a， 但 未 赋值 ，a 为 Undefined 
console.log(b); / 没有 声明 直接 使 用 的 变量 b, 会 报错 

</script> 


显示 效果 如 图 11-1 所 示 。 
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[x 是 Elements Console Sources Network Performance Memory » @1 


© | top v Filter Default levels 次 


undefined -变量 的 数据 类 型 .htm1?_hbt=1512665423624:8 
@ Uncaught ReferenceError: b is not -变量 的 数据 类 型 .htm1? hbt=1512885423824:9 
defined 
at 82- 变 量 的 数据 类 型 .html? hbt=1512885423824:9 


























图 11-1 Undefined 显示 效果 


2. NULL: 空 引用 

NULL 在 JavaScript 中 是 一 种 特殊 的 数据 类 型 ， 表 示 一 种 空 的 引用 ， 也 就 是 这 个 变量 
什么 都 没有 。 同 时 ，NULL 作为 关键 字 不 区 分 大 小 写 ， 形 如 “NULL”“Null”“null” 均 为 合 
法 数据 类 型 。 














var a = null; 


3. Boolean: 布尔 类 型 
Boolean 值 是 一 种 非常 常用 的 数据 类 型 ， 表 示 真 或 者 假 ， 可 选 值 只 有 两 个 : true 或 
false。 代 码 示例 如 下 : 

















Var a = true; //a 直接 被 赋值 为 true 
var b = 1>2; //b 通过 计算 ， 被 赋值 为 false 


console.log(a); 
console.log(b); 


4. Number: 数值 类 型 
在 JavaScript 中 ， 没 有 区 分 整数 类 型 和 小 数 类 型 ， 而 是 统一 用 数值 类 型 代替 。 例 如 ， 整 
数 类 型 和 小 数 类 型 都 输入 Number 类 型 : 


vara= 11; /a 整数 类 型 
varb = 11.2; /b 小数 类 型 











5. String: 字符 串 类 型 
使 用 双 引 号 《"") 或 单 引 号 〈") 包 于 的 内 容 ， 被 称 为 字符 串 。 两 种 字符 串 没有 任何 区 
别 ， 且 可 以 互相 包含 。 代 码 示例 如 下 : 

var a= "我 在 杰 瑞 教育 上 课 ";， /使 用 双 引 号 声明 字符 串 ， 双 引号 中 可 以 包 囊 单 引号 

varb = ' 我 在 " 杰 瑞 教育 "上 课 '; /使 用 单 引号 声明 字符 串 ， 单 引号 中 可 以 包 右 双 引 号 


console.log(a); 

































































console.log(b); 


显示 效果 如 图 11-2 所 示 。 

6. Object: 对 象 类 型 

Object 是 一 种 对 象 类 型 。 在 JavaScript 中 有 一 名 话 “ 万 物 句 对 象 ” 包括 函数 、 数 组 、 自 
定义 对 象 等 都 属于 对 象 类 型 ， 本 书 将 在 后 续 章 节 进 行 详细 讲 























za 
| 
o 
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[x | Elements Console Sources Network Performance Memory » 


v Filter Default levels 六 


大 型 ,htm1?_hbt=1512695423624:21 
型 .htm1?。_hbt=1512695423624:22 





























图 11-2 ”两 种 字符 串 显 示 效 果 








1.3 JavaScript 中 的 变量 函数 


经 过 11.2 节 的 学 习 ， 读 者 知道 了 在 JavaScript 中 变量 如 何 使 用 ， 也 了 解 到 了 JavaScript 
中 变量 的 基本 数据 类 型 共有 六 种 。 那 么 如 何 检测 变量 是 哪 一 种 数据 类 型 呢 ? 如 何 能 将 变量 
的 数据 类 型 进行 相互 转换 呢 ? 这 就 需要 用 到 在 JavaScript 中 非常 常用 的 变量 函数 了 。 由 于 
某 些 函数 不 具备 输出 打印 功能 ， 所 以 在 本 节 用 到 console.log 输出 打印 语句 。 具 体 的 
console.log 知识 点 详 见 11.4.5 节 。 
11.31 NumeD000000000 
Number 函数 的 作用 是 将 其 他 数据 类 型 变量 转换 为 数值 类 型 ， 具 体 可 以 分 为 以 下 几 种 
情况 。 
1. 字符 串 类 型 转 数 值 
1) 字符 串 为 纯 数值 字符 串 ， 会 转 为 对 应 的 数字 。 
Number("111"); / 转换 之 后 结果 为 111 
2) 字符 串 为 空 字符 串 时 ， 会 转 为 0。 
Number(™"); / 转换 之 后 结果 为 0 
3) 字符 串 包含 其 他 非 数 字 字 符 时 ， 不 能 转换 。 
Number("111a'); / 转换 之 后 结果 为 NaN 


2. 布尔 Boolean 类 型 转 数 值 





























































































































4 














1) true 转换 为 1。 

Number(true); / 将 布尔 型 true 转换 为 1 
2) false 转换 为 0。 

Number(false); / 将 布尔 型 false 转换 为 0 


3. Null 与 Undefined 转 数值 
1) Null 转换 为 0。 


Number(null); / 将 空 引用 null 转换 为 0 
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2) Undefined 转换 为 NaN。 
Number(undefined); // 将 未 定义 undefined 转换 为 NaN 
4. Object 类 型 转 数 值 
先 调用 ValueOtf 方法 ， 确 定 函数 是 否 有 返回 值 ， 再 根据 上 述 各 种 情况 判断 ， 后 续 内 容 会 
详细 讲解 
11.3.2 isNaNUDDODDODODODO NaN 


isNaN 函数 的 作用 是 判断 一 个 变量 或 常量 是 否 为 NaN 〈 非 数值 )。 使 用 isNaN 进行 判断 
时 ， 会 尝试 使 用 Number0 函 数 进行 转换 ， 如 果 能 转换 为 数字 ， 则 不 是 非 数 值 ， 结 果 为 
false。 

1， 纯 数字 字符 串 ， 检 测 结果 为 false 



























































































































































isNaN("111"); // 先 用 Number( 转 为 数值 类 型 的 111， 所 以 isNaN 检测 结果 为 false 





2. 空 字符 串 ， 检 测 结果 为 false 

















isNaN(""); // 先 用 Number() 转 为 数值 类 型 的 0， 所 以 isNaN 检测 结果 为 false 


3. 包含 其 他 字符 ， 检 测 结果 为 true 




















isNaN("1a"); // 先 用 Number0 转 为 NaN ， 所 以 isNaN 检测 结果 为 true 


4. 布尔 类 型 ， 检 测 结果 为 false 























isNaN(false); / 先 用 Number0 转 为 数值 类 型 的 0， 所 以 isNaN 检测 结果 为 false 





1133 parsdnt]0O0000000 

parseInt 函数 的 作用 是 将 字符 串 类 型 转 为 整数 数值 类 型 ， 即 parseInt 函数 可 解析 一 个 字符 
串 ， 并 返回 一 个 整数 。 

1.， 空 字符 串 

不 能 转换 空 字 符 串 ， 输 出 NaN。 


























parseInt(""); / 打印 输出 parseInt 转换 后 的 值 为 NaN 


2， 纯 数值 字符 串 
可 以 进行 转换 ， 但 转化 小 数 时 ， 会 直接 抹 掉 小 数 点 ， 不 进行 四 舍 五 入 。 


parseInt("123"); // 转换 为 123 
parseInt("123.11"); / 转换 为 123 


3. 包含 其 他 字符 的 字符 串 
研 取 第 一 个 非 数 值 字符 前 的 数值 部 分 进行 输 


parseInt("123.11a"); / 转化 小 数 时 ， 会 直接 抹 掉 小 数 点 ， 转 换 为 123 
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parseInt("al23.11"); / 转换 为 NaN 


注意 : parseInt 函数 只 能 转换 String 类 型 对 Boolean、null、Undefined 进行 转换 结果 
均 为 NaN。 


11.34 parseFrloa DUODOOOOOOOODO 

parseFloat 函数 的 作用 是 将 字符 串 转 为 小 数 数值 类 型 ， 使 用 方式 同 parseInt 类 似 ， 唯 一 
不 同 的 是 ， 在 转化 整数 字符 串 时 ， 保 留 整数 。 但 是 ， 当 转化 包含 小 数 点 的 字符 串 时 ， 保 留 
小 数 点 。 

例如 : "123" 结 果 为 123，"123.5" 结 果 为 123.5。 

parseFloat 转换 字符 串 。 代 码 示例 如 下 ; 









































<Script type=" text/javascript"> 
console.log(parseFloat("123")); 。// 打印 输出 parseFloat 转换 后 的 a 的 值 ， 可 以 发 现 与 
/ parseInt 转换 结果 一 





console.log(parseFloat("123al1")); / 转换 为 123 
console.log(parseFloat("al23")); / 转换 为 NaN 
console.log(parseFloat("123.112a')); / 转化 小 数 时 ， 会 保留 小 数 点 ， 转 换 为 123.112 
console.log(parseFloat("al23.11")); // 转换 为 NaN 

</script> 


注意 : parseFloat 同样 也 是 只 能 转换 String 类 型 ， 对 Boolean、null、Undefined 进行 转换 
结果 均 为 NaN。 


1135 typeofj OOOODOD 

typeof 消 数 是 JavaScript 中 非常 常用 的 一 个 函数 ， 它 的 主要 作用 是 用 来 检测 一 个 变量 的 
数据 类 型 ， 传 入 一 个 变量 ， 返 回 变 量 所属 的 数据 类 型 。 一 般 分 为 以 下 儿 种 情况 : 

1) 未 定义 : 数据 类 型 为 Undefined。 

2) 数值 : 数据 类 型 为 Number。 

3) 字符 串 : 数据 类 型 为 String。 

4) True/False: 数据 类 型 为 Boolean 。 

5) Null /对 象 : 数据 类 型 为 Object。 

6) 函数 : 数据 类 型 为 function 。 

为 了 方便 使 用 ，JavaScript 在 语法 上 为 typeof 函数 提供 了 两 种 常用 写法 ， 分 别 是 函数 写 
去 和 指令 写法 。 

1) 函数 写法 : 需要 保留 0， 变 量 通过 0 传 入 。 基 本 语法 如 下 : 


typeof("jredu"); / 函数 调用 方式 需要 将 变量 通过 函数 后 面 的 0 传 入 
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2) 指令 写法 : 可 以 省 略 0， 直 接 将 变量 紧 跟 typeof。 基 本 语法 如 下 ; 
typeof "jredu"; / 指令 调用 方式 可 以 省 略 0， 直 接 将 变量 紧 跟 typeof 
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11.4 JavaScript 中 的 输入 输出 


11.41 document.writdljUDODOODODOD 
在 JavaScript 中 ，document.write() 方 法 常用 来 网 页 向 文档 中 输出 内 容 。document.write0) 









































输出 语句 将 “0” 中 的 内 容 打印 在 浏览 器 中 ， 使 用 时 需 注 意 ， 除 变量 或 第 量 以 外 的 任何 内 
容 ， 打 印 时 必须 放 到 "中 ， 变 量 或 常量 必须 放 到 ”外 。 











1. 基本 语法 
document.write(" 输 出 内 容 "); 


2. 拼接 字符 串 
当 打 印 输出 的 内 容 同 时 由 多 部 分 组 成 时 ， 每 部 分 用 “+” 符 号 链接 。 代 码 示 例如 下 : 

















var str=" 你 好 " ; 
document.write(str+" "+"world"); 上 # 在 网 页 中 输出 的 结果 为 : 你 好 world 六 





注意 : 拼接 字符 串 ， 用 加 号 "+"; 字符 串 用 双 引 号 "" 包 衷 起 来 。 

还 可 以 通过 document.write() 方 法 来 输出 html 标签 ， 也 可 以 将 CSS 样式 写 入 到 标签 中 ， 
注意 书写 格式 ， 及 引号 之 间 的 转 义 。 

代码 示例 如 下 : 

















<script type=" text/javascript"> 
document.write("<p style='border:lpx solid black;width:300px;height:90px;line—height:90px; 
background:#abcdef;text-align:center;'> 杰 瑞 教 育 http:/www.jredu100.com </p>"); 
放 输出 html 标签 ， 只 须 将 标签 写 入 双 引 号 中 */ 
</script> 





显示 效果 如 图 11-3 所 示 。 


口 1270.0.1.8020/ 教 材 /112 x 人 
| @ 127.0.0.1:8020/ 教 材 /12/04/ 输 入 输出 区 





杰 瑞 教育 http://wwwjredu100.com 














图 11-3 文档 打印 输出 显示 效果 








11.42 aleaet]0O000000 
JavaScript 的 alert 函数 是 专门 用 来 弹 窗 显示 的 ， 它 带 有 一 个 “确定 ”按钮 。 浏 览 
的 alertO 弹 窗 警 告 ，0 中 的 语句 的 使 用 方式 与 document.write0) 括 号 中 的 相同 。 基 本 语法 
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如 下 : 
alert(" 弹 窗 警 告 内 容 "); 


显示 效果 如 图 11-4 所 示 。 





GC |© 127.0.0.1:8020/HelloWorld/Ja 


127.0.0.1:8020 显示 : 
弹 窗 警告 














图 11-4 弹 窗 警 告 显示 效果 


1143 promptUOUOUO0O00 


弹 窗 输 入 提示 框 经 常用 于 提示 用 户 在 进入 页 面前 输入 某 个 值 。 当 提示 框 出 现 后 ， 用 户 需 
要 输入 某 个 值 ， 然 后 单 击 “ 确 认 ” 或 “取消 ”按钮 才能 继续 操纵 。 如 果 用 户 单 击 “确认 ” 按 
钮 ， 那 么 返回 值 为 输入 的 值 。 如 果 用 户 单 击 “取消 ”按钮 ， 那 么 返回 值 为 null。 
基本 语法 如 下 : 


prompt(" 请 输入 您 的 年 龄 :，","20 岁 "); 


prompt 包含 两 部 分 参数 : 第 一 部 分 是 输入 框 上 面 的 提示 信息 ， 可 选 ， 第 二 部 分 是 输入 框 
里 面 的 默认 信息 ， 可 选 。 两 部 分 之 间 用 运 号 分 隔 ， 只 写 一 部 分 时 ， 默 认为 提示 信息 。 显 示 效 
果 如 图 11-5 所 示 。 
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GG |© 127.0.0.1:8020/HelloWorld/JavaScript/ch12.html?_hbt=1506... 安 | : 





x 








127.0.0.1:8020 显示 : 
请 给 入 您 的 年 龄 




















图 11-5 弹 窗 输入 显示 效果 

注意 : 弹 窗 默 认 接 收 输入 的 内 容 ， 为 字符 囊 String 格式 。 

还 可 以 定义 变量 来 接收 输入 内 容 ， 例 如 var name = prompt(" 请 输入 您 的 名 字 : ")， 单 避 
“确定 ”按钮 ，name 赋值 为 所 输入 的 字符 串 ; 单 击 “ 取 消 ” 按 钮 ， 变 量 name 赋值 为 null。 
11.44 confirm D000000 

当 用 户 进 行 手 动 操作 时 ， 浏 览 器 弹 窗 确认 可 以 一 定 程度 上 避免 用 户 误 删 操 作 造 成 的 数据 
丢失 。 比 如 数据 的 删除 操作 ， 当 用 户 单 击 “删除 ”按钮 时 ， 会 弹出 一 个 确定 对 话 框 ， 如 果 用 
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户 单 击 “ 确 定 ” 按 钮 ， 执 行 删除 操作 ;如 果 用 户 单 击 “ 取 消 ”按钮 ， 则 不 执行 删除 操作 。 
下 面 来 看 一 段 JavaScript 代码 。 代 码 示例 如 下 : 


varis = confirm(" 在 吗 ? ? ? "); 
ifis)f{ 

alert(" 在 "); 
}else{ 

alert(" 不 在 "); 























} 
显示 效果 如 图 11-6 所 示 。 


127.0.0.1:8020/ 教 材 /12 x > 


X | @ 127.0.0.1:8020/ 教 材 /12/04/ 输 入 输出 函数 .html?_hbt=1512 


SA 1 罗 | ,7 0.0.1.8020 豆 示 : 


在 吗 ? ? ? 








图 11-6 confirm 弹 窗 确认 语句 显示 效果 


单 击 “确定 ”按钮 后 的 显示 效果 如 图 11-7 所 示 。 

















) 127.0.0.1:8020/ 教 材 /12 x 
X |@ 127.0.0.1:8020/ 教 材 /12/04/ 输 入 输出 函数 .html?_hbt=1512093392247 
点 击 这 里 导入 书签 。 天 E 
SAP 答 开 疯 | 27 0.0.1:8020 显示 : 
在 











图 11-7 confirm 弹 窗 确 认 后 的 显示 效果 


11.45 consolelog] DOOOOODOODOD 
SE 试 的 浏览 器 主要 是 Chrome。 先 简单 介绍 Chrome 的 控制 台 ， 打 开 Chrome 浏 
览 器 ， 按 F12 键 可 以 轻松 地 打开 控制 台 ， 万 一 不 行 ， 还 可 以 在 页 面 任意 位 置 单 击 鼠 标 右键 ， 
再 单 “检查 ”按钮 即 可 。 效 果 如 图 11-8 所 示 。 
从 图 11-8 中 ， 可 以 看 到 控制 台面 板 上 方 有 一 行 导航 条 ， 导 航 条 上 包含 了 Elements 面 
板 、Console 面板 、Sources 面板 、Network 面板 等 功能 面板 。 
1) Elements: 查找 网 页 源 代码 HTML 中 的 任意 元 素 ， 手 动 修改 任意 元 素 的 属性 和 样式 
能 实时 在 浏览 器 里 面 得 到 反馈 
2) Console: 记录 开发 者 开发 过 程 中 的 日 志 信 息 ， 且 可 以 作为 与 JavaScript 进行 交互 的 
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人 127.0.0.1:8020/ 教 材 /12 x 同和 
C | @ 127.0.0.1:8020/ 教 材 /12/04/ 输 入 输出 函数 .html?_hbt=1512095324230 
点 击 这 里 导入 书签 。 开始 














s Network 。 Performance Memory Application 





Default levels Y 











图 11-8 控制 台 


3) Sources: 上 断 点 调试 JavaScript。 

4) Network: 从 发 起 网 页 页 面 请 求 Request 后 分 析 HTTP 请 求 后 得 到 的 各 个 请 求 资源 信 
上 县 《包括 状态 、 资 源 类 型 、 大 小 、 所 用 时 间 等 )， 可 以 根据 这 个 进行 网 络 性 能 优化 。 

选择 Console 面板 ， 然 后 就 可 以 在 面板 中 看 到 ， 在 JavaScript 文件 中 使 用 console.log0 打 
印 出 来 的 内 容 了 。 

代码 示例 如 下 : 








<script type="text/javascript"> 
console.log(" 杰 瑞 教 育 出 版 "); 
</script> 


控制 台 打印 输出 结果 如 图 11-9 所 示 。 


[x 口 ] Elements Console Sources Network 《Performance » 


© top vv | Filter Default levels 了 be 


杰 瑞 教育 出 版 入 输出 于 | 娄 .html3 hbt=1514539815887:16 
> | 











图 11-9 ”console 打印 输出 语句 


1]1.46 JavaSdipt[] 吕 DODO 

JavaScript 中 的 注释 有 两 种 方式 ， 一 种 是 单行 注释 ， 男 一 种 是 多 行 注释 。 使 用 注释 有 助 
于 提高 代码 可 读 性 ， 可 以 方便 调试 。 

1. 单行 注释 

以 /开头 ， 可 以 单独 一 行 ， 也 可 以 放 在 代码 后 ， 在 同一 行 中 。 


/ 这 是 单行 注释 
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2. 多 行 注释 
以 x: 开始 ， 以 */ 结尾 ， 经 常用 来 对 一 个 函数 或 语句 块 进行 解释 说 明 。 
/* 


这 是 一 个 多 行 注释 
2/ 








3. 文档 注释 
以 /is 开始 ， 以 /结尾 ， 使 用 上 与 多 行 注 释 类 似 ， 但 是 功能 比 多 行 注释 强大 。 当 在 一 
个 函数 上 方 使 用 文档 注释 声明 时 ， 调 用 函数 时 可 以 看 到 注释 内 容 。 


注意 : 函数 相关 知识 点 将 在 第 14 章 讲解 ， 读 者 了 解 即 可 。 



































/* * 

* 这 是 函数 的 文档 注释 ， 调 用 函数 名 时 ， 可 以 在 编译 器 里 面 看 到 
未 

function testO{ 


} 















































使 用 文档 注释 后 ， 通 过 调用 函数 ， 可 以 看 到 注释 内 容 ， 如 图 11-10 所 示 。 








订 闵 
* 这 是 函数 的 文档 注释 ， 调 用 函数 名 时 ， 可 以 在 编译 器 里 耐看 到 
function test(){ 
上 
test| 
Or 





图 11-10 文档 注释 显示 效果 











11.5 ”JavaScript 的 运算 符 























JavaScript 中 的 运算 符 与 其 他 编程 语言 中 的 运算 符 大 体 类 似 ， 但 是 在 具体 的 使 用 上 又 各 
有 不 同 ， 学 习 时 除了 要 记 住 每 种 运算 符 的 作用 之 外 ， 更 要 记 住 运算 符 在 运行 时 的 具体 特点 ; 
在 功能 类 似 的 运算 符 之 间 ， 要 注意 比较 运算 符 之 间 的 区 别 。 

1151 0000 


减 ) 七 种 。 下 面 对 几 个 特殊 符号 进行 解释 。 
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1. 运算 符 + 
有 两 种 作用 ， 一 种 是 连接 字符 串 ; 另 一 种 是 进行 加 法 运算 。 当 + 两 边 均 为 数字 时 ， 进 行 
加 法 运算 ， 当 + 两 边 有 任意 一 边 为 字符 串 时 ， 进 行 字符 串 连 接 ， 连 接 之 后 的 结果 为 字符 串 。 
2. 自 增 〈 自 减 ) 运算 符 
++: 自 增 运算 符 将 变量 在 原 有 基础 上 加 1。 
一 : 自 减 运算 符 ， 将 变量 在 原 有 基础 上 减 1。 
3. n++ 与 ++n 的 异同 
(1) 相同 点 
不 论 n++ 还 是 ++n， 在 执行 完 代 码 以 后 ， 均 会 把 nm 的 值 加 1。 
(2) 不 同 点 
n++: 先 使 用 mn 的 值 进行 计算 ， 然 后 把 na 加 1。 
++n: 先 把 n 的 值 加 1， 然后 用 n+l 以 后 的 值 去 运算 。 
代码 示例 如 下 : 













































































































































































var a= 3; 
Var b,c; 
b=at++2; 
c=++a+2; 


控制 台 打 印 输出 结果 如 图 11-11 所 示 。 


nents Console Sources Netwo 


了 Filter 


81- 算 术 运 算 符 .html? hbt=151 
@1- 算 术 运 息 符 .html? hbt=151383: 














图 11-11 n++ 与 ++n 的 打印 输出 结果 


上 述 代 码 中 ， 当 程序 运行 到 “b = a++ +2” 时 ， 此 时 a=3， 执 行 该 语句 b=3+2=5， 然 后 
a+1=4; 当 运 行 到 “c = ++a +2” 时 ， 此 时 a=4， 但 是 这 条 语句 是 “++a”， 因而 在 执行 这 条 语 
句 前 ， 先 执行 at1=5， 最 后 执行 这 条 语句 ， 得 到 c=5+2=7。 


11.52 DOO0ODOD 
赋值 运算 符 有 基本 运算 符 与 复合 运算 符 两 种 ， 下 面 针 对 它们 的 用 法 进行 解释 。 
1， 基 本 赋值 运算 符 
基本 的 赋值 运算 符 是 “=” 它 的 优先 级 别 低 于 其 他 的 运算 符 ， 所 以 对 该 运算 符 往 往 最 后 
读 取 。 
一 开始 可 能 会 以 为 它 是 “等 于 ” 其实 不 是 的 。 它 的 作用 是 将 一 个 表达 式 的 值 赋 给 一 个 
左 值 。 一 个 表达 式 或 者 是 一 个 左 值 ， 或 者 是 一 个 右 值 。 所 谓 左 值 是 指 一 个 能 用 于 赋值 运算 左 
边 的 表达 式 。 左 值 必 须 能 够 被 修改 ， 不 能 是 常量 。 
一 般 用 变量 作 左 值 ， 基 本 语法 如 下 : 
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旋 赋值 运算 符 */ 

vara=3; 

varb = 4; 

varc=(a+b)*(2#a 一 b); / 结果 为 14 
console.log(c); 


2. 复合 赋值 运算 符 
复合 赋值 运算 符 有 +=、-= 一 、*=、 人 上、%= 五 种 ， 基 本 语法 如 下 : 

















5 








TH 














于 它们 实际 上 是 一 种 缩写 形式 ， 使 得 对 变量 的 改变 更 为 人 简洁， 所 以 前 者 (+=) 的 执行 
效率 要 比 后 者 快 。 


1153 DUOUO0O0000 


1， 关 系 运 算 符 

关系 运算 符 有 七 种 ，== (等 于 )、=== (严格 等 于 )、!= (不 等 于 )、> (大 于 )、< (小 
于 )、>= (大 于 等 于 )、<= (小 于 等 于 )。 

=== 与 一 的 区 别 】 

-==: 严格 等 于 ， 左 右 两 边 的 数据 类 型 不 同时 ， 返 回 false; 类 型 相同 时 ， 再 进行 下 一 步 
值 的 判断 。 

= 二; 等于， 左右 两 边 的 数据 类 型 相同 时 ， 再 进行 下 一 步 值 的 判断 ， 类 型 不 同时 ， 尝 试 将 
等 式 两 边 转 为 数值 类 型 ， 再 进行 判断 。 








代码 示例 如 下 : 
Vala = lS 
var b = 123; 


console.log(a===b); 
console.log(a==b); 


控制 台 打印 输出 结果 如 图 11-12 所 示 。 





Elements Console Sources Network Performance » 


了 Filter Default levels 了 
93-%E5%85%B3X%E7X%B3X%BBXE8XBFX99XE7X%AE%X97%E7XACXA6 .html: 12 


93-X%E5%85%B3%E7XB3%BBXE8%BFX%98XE7X%AE%97%E7XACXA6 .htm1:13 

















图 11-12 === 与 == 的 打印 输出 结果 


2.， 逻辑 运算 符 
逻辑 运算 符 有 三 种 ，&& (与 )、 (或 )、! ( 非 )。 
逻辑 运算 符 运 算 结果 的 总 结 见 表 11-1。 

















165 


Web 前 端 学 习 笔 记 : HTML5+CSS3+JavaScript 


表 11-1 逻辑 运算 符 


























a b la allb a&&b 
true true false true true 
True false false true false 
false true true true false 
false false true false false 
根据 表 11-1， 可 以 总 结 出 以 下 规律 。 





1) 逻辑 非 : 值 为 true 的 “!” 为 false， 值 为 false 的 “!” 为 true。 
2) 届 辑 与 ; 当 && 左 右 两 侧 的 值 均 为 true 时 ， 表 达 式 结果 为 trtue， 否 则 表达 式 为 false。 
3) 逻辑 或 : 当 | 左 右 两 侧 的 值 均 为 false 时 ， 表 达 式 结果 为 false， 否 则 表达 式 为 true。 


1124 OODOODOOOOOOD 
1. 条 件 运 算 符 的 形式 
表达 式 1? 表达 式 2: 表达 式 3 
2. 关键 符号 ? 和 : 
1) 当 ? 前面 的 部 分 运算 结果 为 true 时， 执行“:” 前 面 的 代码 。 
2) 当 ? 前 面 的 部 分 运算 结果 为 false 时 ， 执 行 “:” 后 面 的 代码 。 
3. 多 层 能 套 
多 目 运 算 符 可 以 多 层 先 套 ， 基 本 语法 如 下 : 

































































var num = 5; 
var result = num>5?7" 输 入 太 大 ":mum==5?" 猿 对 了 !":" 输 入 大 小 "); 


console.log(result); 


控制 台 打 印 输出 结果 如 图 11-13 所 示 。 


Network Performance » 


Default levels 了 肖 


94-%E5XA4NX9AXE7X9BXAEXES8XBFX98XE7XAE%97%E7XACXA6 .html: 11 














图 11-13 条 件 运算 符 多 层 嵌 套 打 印 输出 结果 








上 述 代码 中 定义 了 一 个 num=5 的 变量 ， 执 行 第 二 条 语句 时 ， 先 进行 num>5 的 判断 ， 结 
果 为 false， 执 行 “: ”后 的 语句 ， 由 于 “: ”后 的 语句 义 是 一 条 多 目 运 算 语句 ， 因 而 先 执行 
num==5 的 判断 ， 结 果 为 tue， 此 时 执行 该 条 多 目 运 算 : 前 面 的 语句 ， 变 量 result 被 赋值 为 
“ 猜 对 了 !2”， 打 印 输出 result， 得 到 图 11-13 所 示 的 打印 结果 。 
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第 11 章 


j 喜 号 运算 符 连 接 起 来 的 表达 式 ， 称 为 去 号 表达 式 。 


RT I 3 ST Dy oe oop ， 表达 式 n 





下 面 直接 看 一 段 代码 示例 : 


Wat lal 

varb = 0; 

Var Cc; 

c= "(Ftaa*=200=a 
console.log(c); 


控制 台 打 印 输出 结果 如 


“3 


11-14 所 示 。 











图 11-14 辟 写 运算 符 打 印 输出 结果 











执行 第 三 条 语句 时 ， 首 先 执行 tta，a=2+1=3， 然 后 执行 a=3*2=6， 




















30。 由 于 整个 逗号 表达 式 的 


1156 0U00000 



































三 


到 


JavaScript 基础 

















后 执行 b=6*5= 
和 直 是 最 后 一 个 表达 式 的 值 ， 所 以 示例 中 e 的 值 为 30。 


JavaScript 中 总 是 按 从 左 到 右 的 顺序 来 计算 表达 式 ， 运 算 符 的 优先 级 决定 了 表达 式 中 运算 








执行 的 先后 顺序 ， 先 执行 优先 级 高 的 运算 符 ， 而 结合 怕 
表达 式 中 的 运算 顺序 。 如 果 在 实际 开发 中 无 法 确定 所 使 用 的 运算 符 优 多 






































号 0 来 直接 指定 运算 顺序 。 表 11-2 中 的 运算 符 就 是 按 优 先 级 依次 递减 的 顺序 排列 的 。 





表 11-2 运算 符 的 优先 级 与 结合 性 


E 指 定 了 在 多 个 具有 同样 优先 级 的 运算 符 
E 级 ， 那 么 可 以 使 用 圆 括 





























































































































运 算 符 描述 结 合 性 

0 列 插 号 左 向 右 

4 ++， 一 逻辑 非 ， 递 增 ， 递 减 右 向 左 
*，/，% 乘法 ， 除 法 ， 取 余 左 向 右 

+， 一 加 法 ， 减 法 左 向 右 
<，<=，>，“<= 小 于 ， 小 于 或 等 于 ， 大 于 ， 大 于 或 等 于 左 向 右 

==， 上 丘 等 于 ， 不 等 于 左 向 右 

芒 & 逻辑 与 左 向 右 

| 逻辑 或 左 向 右 

=，+=， 一 ，*=，/=，%= 赋值 运算 符 ， 复 合 赋值 运算 符 右 向 左 
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运算 符 优 先 级 代码 示例 如 下 : 


Var Z= 10+8 - 16*6*(80/20)+65 - 72%2; 
console.log(Z); 


控制 台 打 印 输出 结果 如 图 11-15 所 示 。 


ments Console Sources 


Dt Filte 


XKE7XAEX97%E7XACXA6XE4%BCX98X%E5% 














图 11-15 ”运算 符 优先 级 打印 输出 结果 


上 述 代码 运行 结果 为 -301。 根 据 优先 级 规则 ， 括 号 的 优先 级 最 高 ， 其 次 
最 后 计算 加 减 ， 由 此 得 出 结果 -301。 











乘除 和 取 余 ， 


[au 

















11.6 章节 案例 : 判断 一 个 数 是 否 为 水 仙人 花 数 


输入 一 个 三 位 数 ， 判 断 其 是 否 为 一 个 水 仙 花 数 。 水 仙 花 数 是 指 一 个 n 位 数 Cn 过 3)， 它 
的 每 个 位 上 的 数字 的 n 次 容 之 和 等 于 它 本 身 。 

例如 ，153 是 一 个 水 仙 花 数 ， 因 为 1^3 + 5^3+ 3^3 =153。 

【案例 代码 】 








var num = prompt(" 请 输入 一 个 三 位 正 整 数 :"); 

var bai = parseIntnum/100); 

var shi = parseInt(num%100/10); 

var ge =parseIntnum%10); 

Var sum = bai*bai*bait+shi*shi*shitge*ge*ge; 
document.write(sum==num? num+" 是 水 仙 花 数 ":num+" 不 是 水 仙 花 数 "); 


【章节 练习 】 

1. 在 页 面 中 使 用 JavaScript 有 哪儿 种 方式 ? 

2，JavaScript 的 变量 命名 需要 注意 哪些 问题 ? 

3. JavaScript 的 变量 数据 类 型 有 、 、 、 、 、 





























o 








4. 分 别 写 出 三 种 数值 函数 进行 转换 时 可 能 的 情况 。 

【上 机 练习 】 

1. 判断 输入 的 年 份 是 否 为 头 年 。 提 示 : 半年 的 判定 规则 为 : 能 被 4 整除 的 普通 年 (不 
能 被 100 整除 的 年 份 ) 和 能 被 400 整除 的 世纪 年 (能 被 100 整除 的 年 份 )。 

2. 编写 一 个 简单 的 计算 器 ， 实 现 两 个 数字 的 四 则 运算 。 

3. 分 别 输入 学 生 的 姓名 、 学 号 、 班 级 以 及 年 龄 ， 然 后 以 表格 形式 输出 展示 ， 效 果 如 
图 11-16 和 图 11-17 所 示 。 
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127.0.0.1:8020 显示 : 


请 给 入 姓名 

















图 11-16 上 机 练习 3 实现 后 的 效果 图 (一 ) 








口 JavaScript 基 础 
C IO 127.0.0.1:8020/HelloWorld/JavaScript/ch12.html?_hbt=1506... 食 











学 生 个 人 信息 展示 
学 号 _| 旺 级 
三 |123456||1701 前 端 





















































图 11-17 上 机 练习 3 实现 后 的 效果 图 (二) 








169 


DD 120 JavascriptUOUODDOOD 











上 一 章 讲述 了 JavaScript 的 基础 知识 ， 包 括 JavaScript 的 变量 、 变 量 函 数 ， 表 达 式 中 运 
算 符 的 优先 级 。 这 些 都 是 JavaScript 语句 的 基本 组 成 内 容 ， 而 这 些 语句 是 按照 一 定 的 顺序 结 
构 来 执行 的 。 实 际 上 几乎 每 种 程序 都 是 由 最 基本 的 顺序 、 分 文 和 循环 结构 组 成 ， 本 章 学 习 
JavaScript 中 的 流程 控制 语句 。 

本 章 学 习 目标 : 

> 掌握 JavaScript 的 分 支 结构 和 循环 结构 。 

> 掌握 JavaScript 的 流程 控制 语句 。 

> 掌握 JavaScript 数据 类 型 的 真 假 表 示 。 

通过 本 章节 的 学 习 ， 可 以 掌握 JavaScript 的 分 六 结构 和 循环 结构 等 流程 控制 语句 。 所 谓 
流程 控制 语句 ， 就 是 当代 码 执 行 到 指定 位 置 后 ， 通 过 判断 条 件 是 否 成 立 决定 代码 如 何 继续 往 
下 执行 。 在 进行 条 件 判 断 时 ， 不 是 只 有 Boolean 类 型 才能 表示 真 假 ，JavaScript 的 其 他 数据 类 
型 也 可 以 进行 真 假 判断 。 详 细 的 关系 见 表 12-1。 













































































































































































表 12-1 各 种 数据 类 型 的 真 假 表示 





























数据 类 型 真 假 
Boolean true false 
String 非 空 字符 串 空 字符 串 
Number 非 0 数值 0 
Object 全 为 真 Ek 
NULL、 NaN、 Undefined 一 全 为 假 


12.1 分支 结构 


在 学 习 分 支 结构 前 先 来 了 解 一 下 顺序 结构 ， 顺 序 结构 是 程序 设计 的 茜 本 结构 。 顺 序 结 
构 ， 顾 名 思 义 ， 按 照 语句 出 现 的 顺序 从 上 到 下 依次 执行 。 总 体 来 说 ， 基 本 所 有 程序 都 是 按照 
语句 出 现 的 先后 顺序 来 执行 代码 。 

本 节 学 习 男 一 种 代码 的 执行 结构 分 支 结构 。 分 支 结构 就 是 需要 根据 不 同 条 件 进 行 判 
断 ， 然 后 执行 不 同 的 操作 。 分 支 结构 主要 分 为 if-else 结构 和 switch-else 结构 两 大 类 ， 首 先 
来 了 解 if-else 结构 。 
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if 结构 是 最 简单 的 分 支 结构 ， 其 判断 的 原理 就 是 通过 判断 庄 后 面 的 条 件 是 否 成 立 ， 如 果 
条 件 成 立 ， 则 执行 这 后 面 的 语句 ， 如 果 条 件 不 成 立 ， 则 不 执行 并 后面 的 语句 。 
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基本 语法 如 下 : 


这 判断 条 件 ){ 
/让 条 件 成 立时 ， 代 码 执行 语句 块 
} 


其 中 ， 让 后 面 的 全 可 以 省 略 ， 形 如 下 面 的 写法 也 是 成 立 的 。 


这 判断 条 件 ) 
/让 条 件 后 紧 跟 的 一 行 语句 ， 才 是 属于 站 结构 的 





局 
= 




































































注意 : 当 省 略 {} 后 ， 直 后 面 紧 跟 的 一 行 语句 才 是 属于 让 结构 的 ， 其 后 的 其 他 语句 与 让 结 
构 无 关 。 代 码 示例 如 下 : 


if(1>2) 
console.log(" 这 人 旬 话 当 寺 条件 成 立 才 能 打印 输出 !");W1>2 不 成 立 ， 所 以 此 行 代码 不 执行 








console.log(" 这 名 话 与 过 条 件 无 关 ， 永 远 都 会 执行 !"); 





注意 : 后 续 所 有 让 相关 结构 ， 均 可 以 省 略 {}， 省 略 后 效果 同上 ， 后 续 章 节 将 不 再 一 一 葡 
述 。 但 是 ， 良 好 的 代码 规范 要 求 在 证 后 面 添加 {}， 即 使 只 有 一 句 代 码 也 不 要 省 略 ， 以 便 清 晰 
明确 地 显示 让 语句 控制 范围 。 


12.12 if-dse[D 0 


if-else 结构 相 比 于 单纯 的 让 结构 ， 多 了 一 种 选择 。 当 if 条 件 成 立时 ， 执 行 if 后 面 的 语 
句 ; 当 证 条 件 不 成 立时 ， 执 行 else 后 面 的 语句 。 
if-else 结构 的 基本 语法 如 下 : 
























































[= 


if( 判 断 条 件 ){ 
/条 件 为 true 时 执行 的 代码 块 
}else{ 


// 条 件 为 false 时 执行 的 代码 块 








b 
代码 示例 如 下 : 


var num = prompt(" 请 输入 一 个 整数 ","0"); 
ifnum>100){ 
/条 件 为 true 时 执行 
document.write(" 这 是 一 个 大 于 100 的 整数 "); 





}else{ 
// 条 件 为 false 时 执行 
document.write(" 这 是 一 个 小 于 100 的 整数 "); 





171 


Web 前 端 学 习 笔 记 : HTML5+CSS3+JavaScript 


12.13 DO0DOifDOD 
多 重 让 结构 也 称 为 阶梯 if 结构 ， 是 if-else 的 另 一 种 形式 。 在 普通 的 if-else 结构 中 ， 只 
有 两 种 情况 可 供 选择 。 

所 谓 的 多 重 让 结构 ， 就 是 在 else 后 面 还 有 判断 ， 当 第 一 个 站 不 成 立时 判断 第 二 个 过， 妆 
第 二 个 证 不 成 立时 判断 第 三 个 这， 以 此 类 推 ， 直 到 最 后 一 个 else 结构 ， 表 示 上 述 所 有 过 条 件 
都 不 成 立 。 
基本 语法 如 下 : 















































































































































if( 条 件 一 ){ 
/ 条 件 一 成 立 
} else 这 条 件 二 ){ 
/ 条 件 一 不 成 立 && 条 件 二 成 立 
// else-if 部 分 ， 可 以 有 N 多 个 
} else{ 
/ 条 件 一 不 成 立 && 条 件 二 不 成 立 





} 
代码 示例 如 下 : 


var num = prompt(" 请 输入 一 个 整数 ","0"); 
ifnum>5){ 
document.write(" 输 入 过 大 "); 
} else ifnum<5){ 
document.write(" 输 入 过 小 "); 
} else ifnum==5){ 
document.write(" 输 入 正确 "); 








} 


12.14 DUOTfOD 


扔 套 if 结构 ， 顾 名 思 义 ， 就 是 将 一 个 完整 的 if 结构 包 囊 在 另 一 个 if 结构 里 面 。 其 功能 
与 多 重 寺 结构 类 似 ， 也 能 判断 多 种 分 支 情况 。 
日 与 多 重 站 结构 不 同 的 是 ， 多 重 站 结构 是 在 前 一 个 寺 条 件 不 成 立时 ， 继 续 判 断 下 一 个 站 
条 件 ; 而 任 套 让 结构 是 在 前 一 个 让 条 件 成 立时 ， 继 续 判 断 下 一 个 if。 
基本 语法 如 下 : 









































一 















































这 (条 件 一 ){ 
这 (条 件 二 ){ 
让 (条 件 三 ){ 
语句 块 ; 





} 
} 
}else{ 
语句 块 ; 
} 
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代码 示例 如 下 : 
var num = prompt(" 请 输入 一 个 整数 ","0"); 
if qum>0){ 
1f mum>100){ 
document.write(" 这 是 一 个 大 于 100 的 整数 ");} 





}else{ 
document.write(" 输 入 的 数字 不 是 正 数 "); 





} 


注意 : 由 于 谱 套 让 结构 比较 烦琐 ， 实 际 开发 过 程 中 一 般 点 套 不 超过 三 层 。 同 时 有 一 个 重 
要 的 原则 ， 能 用 多 重 让 结构 解决 的 问题 ， 尽 量 不 使 用 点 套 证 结构 。 


12.1.5 switch- case[ 0 




















switch-case 语句 是 专门 用 于 判断 多 路 分 文 的 语句 。 在 实际 开发 过 程 中 ， 当 存在 很 多 种 
判断 条 件 的 时 候 ， 应 该 首先 考虑 使 用 switch-case 结构 。 

1. switch-case 的 基本 语法 
其 判断 的 原理 是 先 计 算 switch 后 面 表达 式 的 值 ， 然 后 依次 与 每 个 case 后 面 的 常量 表达 
式 进行 比 对 ， 并 执行 比 对 成 功 的 第 一 个 case 结构 。 
基本 语法 如 下 : 

















| 


















































让 















































Switch( 表 达 式 ){ 
case 常量 表达 式 1: 
语句 1; 
break:; 
case 常量 表达 式 2: 
语句 2; 


default: 
语句 NN 
break:; 
} 


2. switch-case 的 注意 事项 
switch-case 结构 相 比 于 if-else 结构 ， 在 写法 上 要 稍微 复杂 一 些 ， 所 以 使 用 时 有 一 些 注 
意 事 项 需要 大 家 注意 。 和 希望 大 家 在 使 用 这 个 结构 的 时 候 ， 不 要 出 现 一 些 不 必要 的 错误 。 
1) 在 case 后 的 各 常量 表达 式 的 值 不 能 相同 ， 否 则 只 会 执行 第 一 个 。 代 码 示 例如 下 : 














































































































switch (1+1){ 
case 2: 
alert(" 当 前 case 能 够 执行 ! 0); / 判断 1+1=2 后 ， 将 执行 第 一 个 case 结构 
break:; 
case 2: 
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alert(" 当 前 case 不 能 执行 ! "); ”WW 第 三 个 case 即便 答案 正确 ， 也 将 不 再 执行 





























break:; 
} 
2) 在 case 后 允许 有 多 个 语句 ， 可 以 不 用 {} 插 起来。 代码 示 例如 下 : 
switch (1>2){ 
case true:{ 
alert(1); // case 语句 可 以 用 {} 括 起 来 
break:; 
} 
case false: 
alert(2); / case 语句 也 可 以 不 用 {} 插 起 来 
break:; 
} 





3) 每 个 case 语句 后 需要 使 用 break 语句 来 阻止 下 一 个 case 运行 。 

Switch-case 语句 只 能 够 判断 一 次 正确 答案 ， 当 过 到 一 个 正确 答案 后 ， 将 不 再 进行 判断 。 
而 break 语句 在 switch 结构 中 的 作用 是 执行 完 case 语句 后 跳出 switch 结构。 如 果 省 略 break 
语句 ， 将 导致 程序 从 正确 的 case 项 开始 ， 依 次 执行 后 续 所 有 case。 代 码 示例 如 下 ; 






















































































switch (1>2){ 
case true: 
alert(" 这 条 语句 能 够 执行 "); 
//break; 
case false: 
alert(" 这 条 语句 也 能 够 执行 "); 
break; 
} 














4) 各 case 和 default 子 句 的 先后 顺序 可 以 变动 ， 而 不 会 影响 程序 执行 结果 。 代 码 示例 
如 下 : 





switch (1>2){ 
// 如 下 两 个 case 语句 ， 没 有 先后 关系 ， 可 以 随意 排列 
case true: 
alert(" 这 条 语句 能 够 执行 "); 
break:; 
case false: 
alert(" 这 条 语句 也 能 够 执行 "); 
break; 
} 








5) default 子 句 可 以 省 略 ， 但 通常 不 推荐 省 略 ， 因 为 default 子 句 说 明了 表达 式 的 结果 不 
等 于 任何 一 种 情况 时 的 操作 。 代 码 示例 如 下 : 
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var num = 5; 
Switch (num){ 
case 4: 
document.write(" 这 是 4 的 case 块 ! "); 
break:; 
case 5: 
document.write(" 这 是 5 的 case 块 ! "); 
break; 
default: 
document.write(" 这 是 default 的 case 块 ! "); //” default 语句 可 以 省 略 
break; 




















} 


3. 多 重 站 结构 与 switch-case 结构 的 比较 

多 重 计 结构 与 switch-case 结构 都 是 用 于 专门 实现 多 路 分 文 的 结构 ， 两 者 在 功能 上 类 
似 ， 但 是 在 实际 应 用 的 情况 上 存在 一 些 差异 。 两 者 的 比较 如 下 : 

1) 多 重 让 结构 和 switch-case 结构 都 可 以 用 来 实现 多 路 分 支 。 

2) 多 重 if 结构 用 来 实现 两 路 、 三 路 分 支 比较 方便 ， 而 switch-case 结构 实现 三 路 以 上 分 
文 比 较 方便 。 

3) switch-case 结构 通常 用 于 判断 等 于 的 情况 ， 而 多 种 让 通常 用 于 判断 区 间 范 围 。 

4) switch-case 结构 的 执行 效率 要 比 多 重 让 结构 更 快 。 
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12.2 循环 结构 


经 过 12.1 节 的 学 习 ， 读 者 已 经 基本 了 解 了 分 支 结构 。 分 文 结构 可 以 根据 不 同情 况 去 执 
行 不 同 的 代码 ， 但 还 会 遇 到 一 种 情况 ， 就 是 需要 反复 执行 同一 段 代 码 ， 甚 全 可 能 不 知道 要 
执行 多 少 次 ， 这 时 就 要 使 用 循环 结构 来 解决 问题 。 只 要 指定 条 件 为 tue， 就 可 以 循环 执行 
代码 。 


1221 DUO00000 

循环 结构 是 指 一 段 代 码 通过 流程 控制 ， 使 其 不 断 地 执行 ， 直 到 条 件 不 成 立时 ， 跳 出 循环 
结构 。 但 是 ， 如 何 才能 通过 控制 ， 让 程序 执行 指定 的 次 数 呢 ? 这 就 需要 声明 一 个 变量 ， 来 记 
孙 代 码 执行 了 多 少 次 ， 代 码 每 执行 一 次 ， 使 这 个 变量 值 加 1， 最 后 通过 变量 的 值 控制 循环 的 
次 数 。 这 个 变量 就 是 循环 结构 中 非常 重要 的 “循环 变量 ”。 

那么 ， 就 可 以 归纳 出 循环 结构 的 基本 思路 ， 包 括 如 下 几 个 步骤 。 

1. 声明 循环 变量 

循环 第 一 步 就 是 定义 一 个 循环 变量 ， 并 给 这 个 循环 变量 赋 一 个 初始 值 。 














































































































































































































vari=0; 


2. 判断 循环 条 件 
声明 循环 变量 后 ， 需 要 判断 这 个 变量 的 值 是 否 符合 循环 的 要 求 。 以 whbile 循环 为 例 
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(while 循环 将 在 12.2.2 节 讲 解 )， 基 本 语法 如 下 : 


while(i<5){ /W 当 循 环 变量 i 的 值 小 于 5 时 ， 执 行 循环 
} 


3. 执行 循环 体操 作 
当 判 断 循环 变量 的 值 符合 循环 要 求 时 ， 才 能 执行 循环 体 代码 。 


注意 : 不 断 循环 操作 的 代码 ， 被 称 为 循环 体 ， 也 就 是 循环 结构 {} 中 的 代码 。 


























while(i<5){ 
/ 循环 结构 {} 中 的 代码 ， 被 称 为 循环 体 





} 


4. 更 新 循环 变量 
当 循 环 体 全 部 代码 执行 完成 后 ， 需 要 修改 循环 变量 的 值 ， 让 其 增加 (或 减少 ) 一 个 或 多 
个 值 ， 常 用 的 语句 就 是 “it++”“i--” 等 。 基 本 语法 如 下 : 
while(1 <5){ 
/ 循环 体 其 他 代码 ; 
i++;/ 让 循环 变量 +1， 也 可 以 一 次 增加 多 个 值 ， 比 如 使 用 i+=2; 










































































} 


5. 重复 执行 第 2~4 步 
当 循 环 变量 的 值 修 改 以 后 ， 重 新 判断 新 的 循环 变量 是 否 符合 要 求 。 如 果 符 合 要 求 ， 则 循 
环 执行 第 2 一 4 步 ， 如 果 不 符合 要 求 ， 则 直接 跳出 循环 。 
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经 过 12.2.1 节 的 学 习 ， 读 者 知道 了 循环 的 基本 思路 ， 也 大 体 了 解 了 while 循环 的 语法 。 
while 循环 其 实 与 分 支 结构 十 分 类 似 ， 都 需要 提供 一 个 能 够 返回 真 假 的 判断 条 件 。 不 同 的 
是 ， 分 支 结构 只 会 执行 一 次 ， 而 while 循环 会 不 断 地 判断 条 件 是 否 成 立 ， 并 且 不 断 地 修改 循 
环 变量 ， 直 到 条 件 不 成 立 为 止 。 
基本 语法 如 下 : 

while (条 件 ){ 

需要 执行 的 代码 块 

} 


了 解 了 while 循环 的 基本 语句 ， 以 及 循环 的 重要 步 召 ， 下 而 通过 实例 代码 ， 演 示 while 
循环 的 具体 使 用 。 













































































































































































实例 代码 如 下 : 
varn=1; / 声明 循环 变量 
while (n<=5){ / G@ 判断 循环 条 件 
document.write("HelloWhile<br />"); / @) 执行 循环 体操 作 
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D 十 十 ; / @ 更 新 循环 变量 








} 


上 述 代码 的 功能 就 是 在 页 面 打印 了 5 个 “HelloWhile”， 而 打印 的 次 数 就 是 通过 循环 变 
量 n 的 大 小 进行 控制 ， 所 以 在 循环 体 中 切记 不 能 遗漏 循环 变量 的 更 新 语句 “i++”。 如果 缺 
少 更 新 语句 ， 则 循环 变量 没有 更 新 ， 导 致 循环 条 件 一 直 成 立 ， 循 环 不 断 地 执行 ， 就 会 造成 
“ 死 循环 ” 


12.2.3 do-while0 DOO 


do-while 循环 是 while 循环 的 变 体 。 它 的 基本 使 用 与 while 循环 类 似 ， 但 是 有 一 个 非常 
重要 的 区 别 。while 循环 在 声明 循环 变量 以 后 ， 先 判断 循环 条 件 。 也 就 是 说 ， 如 果 循 环 变量 
初始 值 不 符合 循环 条 件 ， 则 while 循环 体 代 码 一 次 都 不 会 执行 。 而 do-while 循环 会 先 执行 一 
饥 循环 体操 作 ， 再 判断 循环 条 件 是 否 成 立 。 也 就 是 说 ， 无 论 循环 变量 的 初始 值 是 否 符合 循环 
条 件 ，do-while 循环 都 至 少 执 行 一 次 。 
基本 语法 如 下 : 
dof{ 
需要 执行 的 代码 块 
}while (条 件 ); 


学 习 了 do-while 循环 的 基本 语法 后 ， 可 以 个 
码 。 代 码 如 下 : 
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用 do-while 循环 改写 12.2.2 节 中 的 实例 代 














var m = 1 ; 

dof{ 
document.write("HelloDoWhile<br />"); 
m++; 

}while(m<=5); 


1224 for0000 


for 循环 是 最 常用 的 一 种 循环 结构 。 相 比 于 while 循环 和 do-while 循环 ，for 循环 将 声明 
循环 变量 、 判 断 循环 条 件 、 修 改 循环 变量 三 个 步骤 都 放 到 了 for 语句 后 面 的 0 中， 使 得 代码 
看 上 去 更 加 简洁 。 

1. for 循环 的 基本 语法 

for 循环 有 三 个 表达 式 ， 分 别 为 声明 循环 变量 、 判 断 循 环 条 件 和 更 新 循环 变量 。 三 个 表 
达 式 之 间 用 英文 分 号 分 隔 。 

























































































基本 语法 如 下 : 
for (初始 化 循环 变量 ; 循环 条 件 ; 修改 循环 变量 的 值 ){ 
需要 执行 的 代码 块 
} 


下 面 使 用 for 循环 改写 12.2.2 节 中 的 实例 代码 。 代 码 如 下 : 
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for (var 1=0; 1<5; i++){ 


document.write("HelloWhile<br />"); 


} 
可 以 看 到 for 循环 代码 相对 于 while 循环 和 do-while 循环 要 简洁 很 多 。for 循环 的 特点 和 
while 循环 相同 ， 都 是 先 判断 条 件 是 否 成 立 ， 再 决定 是 否 执行 循环 体操 作 。 
2. for 循环 省 略 表达 式 
了 解 for 循环 的 基本 语法 ， 可 以 发 现 for 循环 后 面 的 小 括号 中 应 该 包含 三 个 表达 式 ， 但 
是 for 循环 的 三 个 表达 式 均 可 以 省 略 ， 而 两 个 分 号 〈;) 缺 一 不 可 。 代 码 示 例如 下 ; 

































































vari=0; 
for(;i1<=5;){ 
/ 这 个 for 循环 省 略 了 第 1、 第 3 个 表达 式 ， 改 写成 与 while 循环 完全 相同 的 写法 
it+; 
} 
forG;;){ 
/ 这 个 for 循环 省 略 了 三 个 表达 式 ， 当 前 循环 称 为 死 循 环 ， 可 以 通过 其 他 流程 控制 语句 控制 
循环 的 结束 
} 


3. for 循环 中 同时 使 用 多 个 循环 变量 
for 循环 的 三 个 表达 式 均 可 以 由 多 部 分 组 成 ， 表 达 式 之 间 用 去 号 分 陋 



























































互 号 分 隔 ， 但 是 第 二 部 分 的 
判断 条 件 需 要 用 && 连 接 ， 最 终结 果 需 要 为 真 或 假 。 也 就 是 说 ， 通 过 一 次 for 循环 ， 可 以 同时 
更 新 多 个 循环 变量 。 








代码 示例 如 下 : 


for (var i1=0,J=5; 1<=5 && J>=0; 1++,J——) { 
/ 同一 个 for 循环, i 从 0 增 大 到 5，j 从 5 减 小 到 0 


console.logQ+"———"+])); 





} 


4. for-in 循环 
除了 本 节 讲 述 的 for 循环 结构 外 ，for 循环 还 有 
用 于 遍历 对 象 的 属性 。 将 在 后 续 章节 学 习 

















种 结构 ， 即 for-in 循环 ， 这 种 结构 主要 
人 体 用 法 ， 下 面 简单 介绍 其 语法 结构 。 













































































var ar = [1,2,3,4,5]; // 声明 一 个 数组 

for(item in arr){ 
/ 读 出 数组 中 的 每 一 个 值 (数组 有 几 个 值 ，forrin 便 循环 儿 次 ) 
console.log(item); 


























1225 0000 
一 个 循环 内 又 包含 另 一 个 完整 的 循环 结构 ， 称 为 循环 嵌 套 。 当 内 层 的 循环 中 继续 嵌 套 循 














只 
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环 时 ， 就 成 了 多 重 骨 套 。 循 环 供 套 的 特点 是 外 层 循 环 转 一 次 ， 内 层 循环 转 一 过。 
代码 示例 如 下 : 


for(var 1=0; 1<=5; i++){ 
/ 外 层 循环 转 一 次 ， 内 层 循环 转 一 圈 
/ 也 就 是 外 层 循环 执行 一 次 ， 将 打印 5 个 * 号 ， 并 打印 一 个 换行 
for(var j=0; j<=5; j++){ 





document.write(" * "); 


} 


document.write(" <br/>"); 


} 
代码 运行 效果 如 图 12-1 所 示 。 





口 127.0.0.1:8020/ 教 材 /12 Xx 











图 12-1 ， 抠 套 循环 打印 矩形 效果 








通过 图 12-1 可 以 观察 出 打印 矩形 时 ， 内 层 循环 的 次 数 永远 都 是 5 次 。 但 是 在 某 些 情况 
下 ， 内 层 循环 的 次 数 需要 根据 外 层 循环 的 循环 条 件 决 定 。 代 码 示 例如 下 : 





for(var 1=0; 1<=5; i++){ 
/ 内 存 循环 的 次 数 与 外 层 循环 的 循环 变量 1 有 关 
/ 也 就 是 说 ， 二 1 时 内 层 循环 打印 1 个 *，i=2 时 内 层 循环 打印 2 个 *， 以 此 类 推 
for(var j=0; j<=i; j++){ 
document. write(" * "); 
} 
document.write(" <br/>"); 


} 
代码 运行 效果 如 图 12-2 所 示 。 





口 127.0.0.1:8020/ 教 材 /12 x 了 


CG | © 127.0.0.1:8020/ 教 材 /12/02/04- 循 环 谋 套 示例 .html?_hbt=1512108307800 








图 12-2 ” 嵌 套 循环 打印 直角 三 角形 效果 
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12.3 流程 控制 语句 
经 过 12.2 节 的 学 习 ， 了 解 到 循环 结构 的 基本 用 法 ， 但 是 循环 结构 都 是 指定 了 循环 的 次 


数 ， 而 循环 除了 可 以 等 待 其 自动 执行 完成 后 ， 也 可 以 通过 流程 控制 语句 手动 跳出 循环 ， 或 者 
跳 过 某 些 次 数 的 循环 。 常 用 的 流程 控制 语句 有 break、continue、return 三 种 。 


12.3.1 breakD0 0 


break 语句 在 switch-case 结构 中 已 经 见 到 过 了 ， 作 用 就 是 跳出 当前 switch-case 结构 。 
break 语句 还 有 一 个 非常 重要 的 所 用 ， 就 是 跳 过 本 层 循 环 ， 继 续 执 行 循 环 后 面 的 语句 。 
代码 示例 如 下 : 
































for(var 1=1; 1<=5; 1++){ 
/i=3 时 ，break 语句 将 跳 过 本 层 循环 
ifG==3){ 
break:; 
} 
console.log(); 
} 
console.log(" 循 环 结束 ! "); 














代码 运行 效果 如 图 12-3 所 示 ， 当 i=3 的 时 候 ，break 语句 将 直接 跳 过 本 层 循环 ， 继 续 执 
行 循环 后 面 的 语句 ， 所 以 只 能 打印 出 1、2 两 个 值 。 
































图 12-3 ”break 语句 执行 效果 


12.3.2 continueD 


continue 语句 的 作用 是 跳 过 本 次 循环 中 循环 体 剩余 的 语句 而 继续 执行 下 一 次 循环 。 
代码 示例 如 下 : 





for(var 1=1; 1<=5; i++){ 
// i=3 时 ，continue 语句 只 会 跳 过 本 次 循环 ， 继 续 执行 下 一 次 循环 
ifGi==3){ 
continue; 
} 
console.log(); 
} 
console.log(" 循 环 结束 ! "); 
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代码 运行 效果 如 图 12-4 所 示 ， 当 i=3 时 ，continue 语句 只 会 跳 过 一 次 循环 ，i4、i5 将 
照常 执行 ， 所 以 将 能 够 打印 出 1、2、4、5。 








还 








图 12-4 ”continue 语句 执行 效果 


需要 注意 的 是 ， 对 于 while 循环 和 do-while 循环 ，continue 语句 执行 之 后 的 操作 是 条 件 




















判断 ;对 于 for 循环 ，continue 语句 执行 之 后 的 操作 是 变量 更 新 。 
也 就 是 说 ， 对 于 while 循环 和 do-while 循环 ， 必 须 将 循环 变量 更 新 语句 放 到 continue 语 
句 之 上 ， 否 则 将 造成 死 循环 。 代 人 码 示例 如 下 : 

















vari=1; 
while(i<=5){ 
/# i=3 时 ，continue 语句 被 执行 ， 将 跳 过 本 次 循环 后 面 的 语句 ， 包 括 计 +。 这 将 会 导致 循环 
变量 没有 更 新 ， 而 导致 死 循 环 */ 
jifG==3){ 
continue; 

















} 
console.log(); 
itt; 
} 
console.log(" 循 环 结束 ! "); 


总 结 : break 语句 用 在 循环 中 时 ， 可 以 直接 终止 循环 ， 将 控制 转向 循环 后 面 的 语句 。 
continue 语句 的 作用 是 跳 过 循环 体 中 剩余 的 语句 而 直接 执行 下 一 次 循环 。 
12.3.3 return[ 0 
return 语句 只 能 用 于 函数 中 ， 作 用 效果 比 break 语句 更 加 强悍 ， 将 会 直接 终止 当前 函数 
执行 ， 包 括 循 环 后 面 的 语句 也 不 再 执行 。 
注意 : 函数 相关 知识 点 将 在 第 14 章 详细 讲解 ， 大 家 稍 作 了 解 即 可 。 
代码 示例 如 下 : 
!functionO{ 
for(var 1=1; 1<=5; 1++){ 
// 当 i=3 时 ，retum 语句 执行 将 直接 终止 当前 函数 ， 包 括 循环 后 面 的 “循环 结束 !” 
/ 也 将 不 会 执行 


fi==3){ 
return; 
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} 


console.log(i); 


} 
console.log(" 循 环 结束 ! "); 


}0; 
12.4 章节 案例 : 打印 输出 一 个 菱形 
使 用 骨 套 循环 ， 打 印 输出 图 12-5 中 的 萎 形 。 


入 

















于 来 可 
训 家 素 率 来 
当当 宁 亲 凡 闵 补 
闪 农 米 六 家 
六 六 站 


当 


图 12-5 菱形 


【案例 代码 】 


<Script type=" text/javascript"> 
for (var i=1;1<=4;i++) { 
for(var k=1;k<=4-i1;k++){ 
document.write("<span style='display: inline-block;width: 7px;'> </span>"); 
} 
for(var j=1;j <=2*1-1:j++){ 
document.write("*"); 


} 


document.write("<br/>"); 
} 
for (var i=1;1<=3;i++) { 
for(var k=]1;k<=i;k++){ 
document.write(" <span style='display: inline-block;width: 7px;'> </span>"); 
} 
for(var Jj=1;] <=7-2*1;]++){ 
document.write("*"); 


} 
document.write("<br/>"); 
} 
</script> 
【章节 练习 了】 
上 机 练习 】 



































.打印 输出 斐 波 那 契 数列 的 前 15 个 数 ， 斐 波 那 契 数列 的 第 一 个 和 第 二 个 数 分 别 为 1 
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和 1， 从 第 三 个 数 开 始 ， 每 个 数 等 于 其 前 两 个 数 之 和 ， 如 1，1，2，3，5，8，13， 


2. 打印 输 出 九 九 乘法 表 〈 如 


1*1=] 

2*1=2 
3*1=3 
4*1=4 
5S*1=5 
6*1=6 
7*1=7 
8*1=8 
9*1=9 


2*2=4 
3*2=6 
4*2=8 
5*2=10 
6*2=12 
7*2=]4 
8*2=16 
9*2=18 


3*3=9 
4*#3=12 
S+3=15 
6*3=18 
7*#3=21 
8*3=24 
9*3=27 











人 





4#+3=16 
5#4=20 
6*4=24 
7*4=28 
8*4=32 
9*4=36 





5*5=25 
6*5=30 
7*5=35 
8*5=40 
9#5=45 


6*6=36 
7*6=42 
8*6=48 


图 12-6 所 示 采 用 表格 的 形式 )。 





9*6=54 


图 12-6 九 九 乘法 表 


9#7=63 9*8=72 9*9=81 
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函数 是 指 由 事件 驱动 的 或 者 当 它 被 调用 时 执行 的 可 重复 使 用 的 代码 块 。 函 数 是 
JavaScript 中 的 重要 部 分 ， 它 的 使 用 方式 有 很 多 ， 比 如 可 以 将 一 个 函数 赋 给 一 个 变量 或 数组 
元 素 ， 还 可 以 将 其 稀 套 在 另 一 个 函数 中 使 用 。 

本 章 学 习 目 标 : 
掌握 函数 的 声明 与 调用 。 
了 解 函数 的 作用 域 。 
掌握 匿名 函数 的 声明 与 调用 。 
了 解 函数 中 的 内 置 对 象 。 

> 掌握 JavaScript 中 代码 的 执行 顺序 。 

通过 本 章 的 学 习 ， 可 以 很 简便 地 使 用 JavaScript 脚本 实现 更 多 的 功能 操作 ， 大 大 提高 代 
码 的 复 用 率 。 
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13.1 函数 的 声明 与 调用 


函数 是 在 开发 过 程 中 常用 的 一 种 结构 ， 它 的 主要 作用 是 将 程序 中 需要 重复 使 用 的 代码 进 
行 封 贸 ， 从 而 可 以 使 代码 重复 使 用 。 函 数 的 使 用 分 为 声明 和 调用 两 个 阶段 ， 合 理 地 使 用 函 
数 ， 可 以 大 大 地 提高 代码 的 可 重用 性 和 可 维护 性 。 


13.11 [DDOD0O 
在 JavaScript 中 ， 函 数 使 用 function 关键 字 进 行 声明 。 根 据 函 数 参数 的 有 无 ， 函 数 可 以 
分 为 有 参 函 数 和 无 参 函 数 两 种 。 
1. 有 参 函 数 
参数 可 以 理解 为 函数 内 部 需要 使 用 的 变量 ， 这 个 变量 可 以 在 外 部 调用 函数 时 传 入 函数 
中 ， 从 而 可 以 在 函数 中 使 用 。 
有 参 函 数 是 指 在 声明 函数 时 ， 可 以 在 函数 体 的 圆 括号 中 声明 多 个 变量 ， 提 供给 函数 内 部 
使 用 。 













































































































































































































































































基本 语法 如 下 : 
function 函数 名 (参数 1, 参 数 2,……… ){ 
/ 函数 体 
return 结果 ; 
} 
语法 解释 : 
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1) 函数 必须 使 用 function 关键 字 声 明 ， 函 数 名 后 面 的 0 用 于 放 参 数列 表 ， 这 个 参数 列表 
称 为 形 参 (形式 参数 ) 列 表 。 
2) 函数 可 以 有 返回 值 ， 表 示 调 用 函数 时 可 以 接收 一 个 返回 的 结果 。 在 函数 中 使 用 return 



















































































关键 字 将 函数 的 结果 返回 。 
代码 示例 如 下 : 
function addnuml,num2){ 
var sum = num!] + num2; // 形 参 列表 中 的 变量 ， 可 以 直接 在 函数 中 使 用 
return sum; // return 返回 函数 的 返回 值 
} 


2. 无 参 函 数 

无 参 函 数 与 有 参 函 数 在 写法 上 的 唯一 区 别 ， 就 是 无 参 函 数 不 需 要 指定 形 参 列表 。 但 是 
函数 名 后 面 的 0 依然 不 能 够 省 略 。 
基本 语法 如 下 : 

function 消 数 名 0{ 


// 函数 体 
return 结果 ; 




































































} 
代码 示例 如 下 : 


function addO{ 
var sum = 3+5; 
return sum; Wiretur 返回 函数 的 返回 值 





















































通过 函数 封装 起 来 的 代码 ， 就 可 以 在 后 续 使 用 过 程 中 ， 通 过 函数 名 直接 调用 ， 而 且 可 以 
重复 使 


13.12 D0000 
封装 起 来 的 函数 不 能 直接 执行 ， 而 是 需要 手动 调用 函数 ， 才 能 够 执行 函数 中 的 代码 。 在 
JavaScript 中 ， 函 数 调用 的 常用 方式 有 直接 调用 和 事件 调用 两 种 。 
1. 直接 调用 
当 声 明 好 一 个 函数 后 ， 可 以 在 JavaScript 中 直接 使 用 “函数 名 0” 调 用 ， 如 果 是 有 参 函 
数 ， 则 需要 通过 0 将 参数 的 值 传 入 函数 。 
例如 ，13.1.1 节 中 声明 的 两 个 add0 函 数 ， 可 以 通过 如 下 代码 直接 调用 。 

















LSA 
< 



































































































































/ 调用 有 参 函 数 
add(3,5); V/ 3,5 将 分 别 赋 给 函数 的 两 个 形 参 ，numl 和 num2 



































/ 调用 无 参 函 数 
add0; V/ 无 参 函 数 不 需 要 传递 参数 列表 ， 但 是 0 一 定 不 能 省 略 
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语法 解释 : 

1) 函数 调 ) 

2) 调用 函数 时 传 入 参数 列表 
表 与 形 参 列表 的 个 数 没 有 任何 关联 要 求 。 也 就 是 说 ， 
参 也 不 一 定 必 须 声 明 形 参 。 


2. 事件 调用 











除了 使 用 函数 名 直接 调 


容 将 在 第 16 章 








年 





章 详细 讲解 。 





代码 示例 如 下 : 


<button onclick="add(3,5)"> 点 我 调 月 


语法 解释 : 
给 按钮 添加 onclick 属 





FE 








1313 UU0000 
































经 过 13.1.1 节 和 13.1.2 节 的 学 习 ， 
作用 域 。 
内 部 能 用 ! 

来 看 下 面 一 段 代码 : 

















] 函 数 外 ， 还 可 以 通 





性 ， 表 示 当 触发 onlick 








上 方法 </button> 





Wil 


件 ( 单 击 按钮 时 调 ) 


2 





无 论 有 参 函 数 还 是 无 参 函 数 ， 函 数 名 后 面 的 0 都 不 能 省 略 。 
的 值 称 为 实 参 (实际 参数 ) 列表 。 在 JavaScript 中 ， 实 参 列 
有 形 参 


定 必 须 传 入 实 参 ， 而 传 入 实 








过 事件 的 方式 调用 。 




















关于 事件 操作 的 相关 内 

















函数 。 











<script type=" text/javascript"> 


/ 在 函数 外 ， 无 论 是 否 使 | 


vara= 1]; 
[p= 
function funcO{ 

















读者 已 经 学 会 了 函数 的 声明 和 调用 ， 下 面 了 解 函 数 的 
在 JavaScript 中 ， 变 量 只 有 函数 作用 域 。 也 就 是 说 ， 函 数 内 容声 明 的 变量 只 有 




















] var 声明 变量 











量 ， 都 是 全 局 变量 ， 整 























函数 








昌 

















个 JavaScript 文件 可 用 







































































































































































/ 在 函数 内 ， 使 用 var 声明 的 变量 为 局 部 变量 ， 只 有 函数 内 部 可 用 
var c = 1; 
/ 在 函数 内 ， 不 用 var 声明 的 变量 为 全 部 变量 ， 整 个 JavaScript 文件 可 用 
d= 
console.log(a); 1// v 函数 中 可 以 使 用 全 局 变量 
console.log(b); 1// VY 函数 中 可 以 使 用 全 局 变量 
console.log(c); / v 函数 中 可 以 使 用 自身 的 局 部 变量 
console.log(d); 1// v 函数 中 可 以 使 用 全 局 变量 
} 
funcO); 
console.log(a); 1 v 函数 外 可 以 使 用 全 局 变量 
console.log(b); 1// ~ 函数 外 可 以 使 用 全 局 变量 
console.log(c); / XxX 函数 外 不 能 使 用 函数 的 局 部 变量 
console.log(d); 1// v 函数 外 可 以 使 用 全 局 变量 
</script> 


从 上 述 代 码 可 以 得 出 如 下 结论 


1) 在 函数 外 ， 无 论 
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是 否 使 用 var 声明 变量 ， 都 是 全 局 





变量 ， 在 整个 JavaScript 文件 可 用 。 
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2) 在 函数 内 ， 使 用 var 声明 的 变量 为 局 部 变量 ， 只 在 当前 函数 可 用 。 
3) 在 函数 内 ， 不 用 var 声明 的 变量 依然 为 全 局 变量 ， 在 整个 JavaScript 文件 可 用 
4) 在 JavaScript 中 ， 消 数 内 部 能 够 使 用 全 局 变量 ;而 函数 外 部 不 外 g 使 用 局 部 变量 ， 


1314 O00O0000000000 
A a 0 3 
解 的 过 程 中 也 提 到 了 一 些 ， 下 面 进行 汇总 。 
1， 函数 的 命名 规范 
1) 函数 名 只 能 由 字母 、 数 字 、 下 画 线 和 $ 组 成 ， 且 开头 不 能 是 数字 
2) 函数 名 对 大 小 写 敏 感 ， 使 用 时 需 注意 区 分 大 小 写 
3) 函数 名 的 声明 必须 符合 小 驼峰 法 则 或 下 画 线 命名 法 。 
Q 小 驼峰 法 则 :变量 首 字母 为 小 写 ， 之 后 每 个 单词 首 字母 大 写 ( 常 用 )。 
@ 下 画 线 命名 法 : 变量 所 有 字母 都 小 号， 单词 之 间 用 下 画 线 分 隔 















































































































































en 











































































































代码 示例 如 下 : 
function functionNameO{} 1// ~ 小 驼峰 法 则 
function function nameO{} 1// v 匈牙利 命名 法 
function functionname(){} // X 不 符合 命名 规范 


， 形 参 列表 与 实 参 列 表 
和 声明 函数 时 的 参数 列表 ， 称 为 “ 形 参 列表 ”( 变 量 的 名 )。 


function funcnuml,num2,num3){} // 形 参 列表 


























2) 调用 函数 时 的 参数 列表 ， 称 为 “ 实 参 列表 ”( 变 量 的 值 )。 








func(1,2,3); // 实 参 列表 


函数 形 参与 实 参 的 个 数 并 无 直接 关联 
列表 与 调用 函数 的 实 参 列 表 没 有 直接 关联 关系 。 在 函数 中 ， 实 际 有 效 的 
参数 取决 于 实 参 的 赋值 ， 未 被 赋值 的 形 参 为 Undefined。 
// 形 参 列表 个 数 > 实 参 列表 个 数 。 num3 的 值 为 Undefined 


function funcl uml ,num2,num3){} 
func1(1,2); 

































































1 实 参 列表 个 数 > 形 参 列表 个 数 。 多 余 的 实 参 将 存储 在 arguments 对 象 中 ， 详 见 13.3.1 节 
function func2um1){} 
func2(1,2,3); 


函数 如 果 需 要 返回 值 ， 可 用 return 返回 结果 
ee 回 值 ， 也 可 以 没有 返回 值 。 如 果 需 要 返回 值 ， 在 函数 中 使 用 return 返回 。 
调用 函数 时 ， 使 用 “var 变量 名 = 函数 名 0” 的 方式 接收 返回 结果 。 
如 果 函 数 没 有 返回 值 ， 则 接收 的 结果 为 Undefined。 
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function func10{ 
return 1; 


} 


varnuml = func1(); 


function func20{ 


} 
var num2 = func2(); 


























明 语句 之 前 。 有 具体 原理 与 JavaScript 代码 的 执行 | 

















/ 函数 调用 语句 可 以 写 在 函 
funcO); 
/ 函数 声明 
function funcO{} 























/ 使 用 numl 接收 函数 的 返回 值 








/ 没有 返回 值 的 函数 ， 直 接 接收 num2 为 Undefined 


函数 声明 与 函数 调用 没有 先后 之 分 
函数 的 声明 语句 与 函数 的 调用 语句 没有 先后 顺序 之 分 























数 声明 语句 之 前 














/ 函数 调用 语句 也 可 以 写 在 函数 声明 语句 之 后 











funcO; 


13.2 ”匿名 函数 的 声明 与 调用 


除了 13.1 节 中 讲解 的 函数 声明 与 调用 外 ， 在 JavaScript 中 还 有 一 种 特殊 的 函数 一 一 


顺序 有 关 ， 











函数 。 顾 名 思 义 ， 匿 名 函数 就 是 指 没 有 

















调用 呢 ? 接 下 来 一 起 来 探讨 这 些 问 题 
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函数 名 的 函数 。 这 样 


























即 函数 调用 语句 可 以 写 在 函数 声 


详 见 13.4 节 。 























匿名 
的 函数 应 该 怎么 声明 ?又 该 怎么 











匿名 函数 最 常用 的 地 方 就 是 配合 事件 使 用 ， 表 示 当 触发 哪 一 个 事件 时 ， 执 行 哪 一 个 匿名 


函数 。 代 码 示例 如 下 ; 








/ window.onload 表示 当 文 档 








window.onload=function(){ 
alert(" ' 杰 瑞 教 党 




















} 
代码 解释 : 








加 载 完 成 后 ， 





动 调用 

















1) window.onload 表示 文档 加 载 成 功 后 





章 详 细 讲 解 。 








0 形 如 “functionO{ 











能 通过 函数 名 直接 调用 。 
13.2.2 0UOO0OO0O0OD0D0 
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除了 在 事件 调用 中 上 自动 使 用 匿名 函数 之 外 ， 


} ”的 结构 称 为 匿名 








还 可 以 使 用 


匿名 函数 


自动 执行 的 函数 。 关 于 事件 相关 内 容 将 在 第 16 





ry 





函数 ， 这 类 函数 没有 函数 名 ， 不 














匿名 函数 表达 式 ， 将 一 个 匿名 函 
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数 赋值 给 一 个 变量 ， 而 在 后 续 调 用 函数 时 ， 这 个 变量 就 可 以 当 作 函 数 名 使 用 。 
声明 函数 表达 式 : var func = functionO{} 
调用 函数 表达 式 : func0; 


注意 : 匿名 浮 数 表达 式 与 首 通 肖 数 在 声明 和 调用 上 有 一 个 非常 大 的 区 别 。 使 用 匿名 浮 数 
表达 式 时 ， 浮 数 调用 语句 必须 在 声明 语句 之 后 ， 否 则 报错 。 有 具体 原因 与 JavaScript 代码 的 执 
行 顺序 有 关 ， 详 见 13.4 节 。 

/ xX 在 匿名 函数 表达 式 声 明之 前 调用 ， 将 会 报错 ! 
funcO; 

/ 声明 匿名 函数 表达 式 

var func = function(O{} 

// ~ 在 匿名 函数 表达 式 声 明之 后 调用 ， 可 以 正常 使 用 ! 
funcO; 
















































































13.23 [ODDO 
在 JavaScript 中 ， 还 有 一 个 非常 重要 的 函数 概念 一 一 自 执行 函数 。 顾 名 思 义 ， 自 执行 
函数 是 指 无 须 手 动 调用 ， 在 声明 函数 时 自动 调用 的 函数 类 型 。 声 明 自 执行 函数 的 语法 结 
构 有 三 种 。 

1.，!function( 形 参 列表 ){ }( 实 参 列表 ); 

这 种 声明 方式 是 最 常用 的 ， 可 以 使 用 任意 运算 符号 开头 ， 但 一 般 使 用 英文 叹 号 “!”， 
在 函数 {} 后 面 紧 跟 一 个 圆 括 号 ， 表 示 上 自动 调用 当前 匿名 函数 ， 函 数 的 实 参 可 以 通过 最 后 的 区 
括号 传 入 。 

代码 示例 如 下 : 










































































































































































!function(numl,num2){ 
var sum = numl + num2; 


}(1,2); 


2. (function( 形 参 列表 ){}( 实 参 列表 )); 

这 种 写法 依然 是 在 函数 的 {} 后 面 使 用 圆 括 号 调用 当前 函数 。 与 第 一 种 方式 不 同 的 是 ， 这 
种 写法 使 用 圆 括号 将 匿名 函数 及 之 后 的 圆 括号 包 囊 成 为 一 个 整体 。 

代码 示例 如 下 : 


































































































(functionOnumlnum2){ 
var sum =numl + num2; 


}(1,2)); 


3. (function( 形 参 列表 ){})( 实 参 列表 ); 

与 第 二 种 方式 不 同 的 是 ， 这 种 写法 只 用 圆 括 号 包 于 匿名 函数 体 ， 而 不 是 将 最 后 调用 匿名 
函数 的 圆 括号 一 起 包 事 。 

代码 示例 如 下 : 

































































(functionOnumlnum2){ 
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var sum =numl + num2; 


Da2); 
4. 三 种 写法 的 特点 





第 一 种 写法 : 开头 使 用 “!”， 结 尾 使 用 “QO” 结构 清晰 ， 是 最 常 使 用 的 写法 。 
第 二 种 写法 : 使 用 括号 包 于 全 部 内 容 ， 可 以 表明 

















体 ， 官 方 推荐 使 用 。 





















































匿名 函数 与 之 后 调用 函数 的 0 为 一 个 整 





第 三 种 写法 : 无 法 表明 函数 与 之 后 调用 函数 的 0 为 一 个 整体 ， 不 推荐 使 用 。 


13.3 ”函数 中 的 内 置 对 象 






































13.3.1 arguments0] 口 


arguments 是 一 个 伪 数 组 对 象 。 由 


的 对 象 。 这 其 ! 























在 JavaScript 中 ， 函 数 中 内 置 了 很 多 常用 
和 this 关键 字 。this 关键 字 将 在 第 19 章 面 
arguments 对 象 是 本 章节 讲解 的 重点 内 容 。 


























日 将 在 第 17 莫 详 旨 

















四 讲解 ， 所 以 本 章 中 只 需要 知道 





最 常用 的 就 是 arguments 对 象 


摆 向 对 象 环节 详细 讲解 ， 本 章节 只 做 简单 描述 。 






































数组 取 值 的 基本 概念 即 可 。 数 组 中 的 值 是 有 序 排列 的 ， 每 个 值 都 有 一 个 下 标 ， 从 0 开始 依次 























增 大 ， 当 需要 读 取 数 组 中 的 值 时 ， 可 以 









































ee 














读 取 arguments 数组 中 的 第 一 个 值 ， 可 以 














var numl = argument[0]; 














] “数组 名 [下 标 ]” 的 方式 进行 调用 。 例 如 ， 需 要 
用 下 述 代码 ， 








了 解 了 如 何 从 arguments 对 象 中 取 值 ， 那 arguments 对 象 里 面 存 的 值 都 是 什么 呢 ? 其 实 











arguments 对 象 主要 有 两 个 作用 。 








1. arguments 对 象 用 于 存储 函数 的 实 参 列表 


arguments 对 象 的 第 一 个 作用 是 保存 在 调 
































arguments[n] 的 形式 调用 参数 。 代 码 示例 如 下 ; 








<Script type=" text/javascript"> 


function funcO{ 





] 函 数 时 所 赋值 的 实 参 列表 。 当 调用 函数 并 使 
用 实 参 赋值 时 ， 实 际 上 参数 已 经 保存 到 arguments 数组 中 。 即 使 没有 形 参 ， 也 可 以 使 用 


























Tr 






































// 无 论 是 否 有 形 参 ， 都 可 以 使 用 arguments 对 象 取 到 实 参 列表 所 赋值 的 数据 


console.log(arguments[0]); 
console.log(arguments[1]); 
console.log(arguments[2]); 
console.log(arguments[3]); / 只 


} 




















func(" 杰 瑞 教 育 ","HTMLS5 课程 ","PHP 课程 "); 


</script> 





代码 运行 效果 如 图 13-1 所 示 。 
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有 三 个 实 参 ， 读 取 第 四 个 值 为 Undefined 
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图 13-1 arguments 对 象 展示 效果 


注意 ，arguments 的 个 数 是 由 实 参 决定 的 ， 不 由 形 参 决定 。 对 于 arguments 和 形 参 都 存在 
的 情况 下 ， 形 参 和 arguments 是 同步 的 。 


代码 示例 如 下 : 


function funcum1){ 
// 实 参 赋值 为 10， 打 印 arguments 第 一 个 值 为 10 
console.log(arguments[0]); 
/ 将 形 参 第 一 个 值 修改 为 20 
numl = 20; 
/ 再 次 打印 arguments 第 一 个 值 ， 将 与 形 参 第 一 个 值 同 步 变 化 为 20 


console.log(arguments[0]); 























} 
func(10); 





代码 运行 效果 如 图 13-2 所 示 。 




















图 13-2” ”arguments 对 象 与 形 参 同步 绑 定 效果 


2. 使 用 arguments.callee 表示 当前 函数 的 引用 

arguments 对 象 除了 可 以 保存 实 参 列表 之 外 ， 还 有 一 个 重要 的 属性 calee， 用 于 返回 
arguments 所 在 函数 的 引用 。 

arguments.callee() 可 以 调用 自身 函数 执行 。 在 函数 内 部 调用 函数 自身 的 写法 ， 称 为 递 
归 。 因 此 ，arguments.callee0 是 递归 调用 《递归 不 是 本 课程 需要 重点 掌握 的 重点 ， 了 解 即 
可 ) 时 常用 的 方式 。 

代码 示例 如 下 : 

































































<script type=" text/javascript"> 
varnum = 1; 
function funcO){ 


console.log(num); 
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Dum++; 
iftnumx=5){ / 当 num<=5 时 ， 函 数 递归 调用 自身 
arguments.callee(); // arguments.callee0 表 示 调 用 函数 自身 ， 效 果 与 func0 相 同 
} 
} 
func(); 
</script> 

















从 上 述 代码 可 以 看 到 ， 当 num<=5 时 ， 函 数 将 递归 调用 自身 ， 即 通过 递归 模拟 了 一 个 循 
环 操作 。 最 终结 果 如 图 13-3 所 示 。 




















图 13-3 num<=5 时 函数 递归 调用 自身 


13.3.2 thisD O00 

this 关键 字 指 向 当前 函数 调用 语句 所 在 的 作用 域 。 由 于 this 关键 字 是 重点 内 容 且 牵扯 内 
容 较 多 ， 所 以 将 this 关键 字 内 容 放 在 第 18 章 面 向 对 象 章 节 进 行 详细 讲 解 ， 此 处 只 需 牢记 一 
句 话 “ 谁 调用 函数 ，this 指向 谁 ”。 

下 面 来 看 一 个 例子 ， 直 接 使 用 函数 名 调用 函数 ， 相 当 于 在 window 对 象 中 调用 函数 ， 故 
这 种 情况 下 ，this 指向 window 对 象 。 

代码 示例 如 下 : 
























































<Script type=" text/javascript"> 
function funcO){ 
// 直接 在 window 对 象 中 使 用 func0 调 用 函数 ，this 指向 window 对 象 


console.log(this); 



































} 
funcO; 
</script> 


打印 出 this 指向 结果 为 window 对 象 ， 如 图 13-4 所 示 。 








图 13-4 this 指向 结果 为 window 对 象 
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13.4 ”JavaScript 中 代码 的 执行 顺序 


代码 的 执行 顺序 是 非常 重要 的 概念 ! 只 有 理解 JavaScript 代码 的 执行 顺序 ， 才 能 理解 一 
些 运行 结果 的 原理 。 
首先 ， 重 新 闻 顾 两 名 话 : 
> 普通 函数 的 声明 语句 与 函数 的 调用 语句 没有 先后 顺序 之 分 。 
> 匿名 函数 表达 式 的 调用 语句 必须 在 函数 声明 语句 之 后 ， 和 否则 报错 。 

这 是 前 文 强调 过 的 两 句 话 ， 那 么 原因 是 什么 呢 ?” 这 就 需要 使 用 JavaScript 代码 的 执行 顺 
序 进 行 解释 了 。 

JavaScript 代码 在 执行 过 程 中 ， 会 分 为 两 个 阶段 :检查 装载 阶段 和 代码 执行 阶段 。 其 
中 ， 检 查 闭 载 阶段 的 主要 工作 是 函数 的 声明 、 变 量 的 声明 等 ， 代 码 执行 阶段 的 主要 工作 是 函 
数 的 调用 、 变 量 的 赋值 、 代 码 的 执行 等 。 

下 面 用 一 段 代 码 来 解释 ， 代 码 示例 如 下 : 























































































































<script type="text/javascript"> 
console.log(num);。// console.log0 是 函数 的 调用 ， 属 于 代码 执行 阶段 ， 而 在 此 时 num 并 没有 
赋值 ， 仅 仅 是 在 检查 装载 阶段 声明 了 变量 num， 因 此 num 为 undefined 
var num = 10; // var num; 是 变量 赋值 ， 在 检查 装载 阶段 ，num=10 是 变量 赋值 在 代码 执行 阶段 






























































func10; / 函数 可 以 正常 执行 。 函 数 的 调用 属于 代码 执行 阶段 ， 而 函数 名 已 经 在 检查 装载 














function func10O{ 
console.log(" 调 用 funcl 成 功 "); 
} 
func20; /函数 不 能 执行 ， 打 印 func2 时 显示 undefined。 匿 名 函数 表达 式 num2 与 变量 相同 
var func2 = function(O{ 
console.log(" 调 用 func2 成 功 "); 

















} 


</script> 








代码 运行 效果 如 图 13-5 所 示 。 








[x a ements Console Sources Network Performance Memory » @1 


© top v Filter Default levels Y 六 


undefined 91-arguments.htm1?_hbt=1512267163593:43 
调用 func1 成 功 91-arguments .html1? hbt=1512267163593:48 
S i 














@ puncaught TypeError: func2 is not a 8Q1-arguments.html? hbt=1512287183593:51 
function 
at @1-arguments.html? hbt=1512287183593:51 























图 13-5 调用 funcl 成 功效 果 


为 了 让 大 家 看 清楚 这 个 结果 ， 下 面 罗列 在 检查 装载 阶段 和 代码 执行 阶段 都 执行 了 哪些 步 
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又 的 代码 。 

1. 检查 装载 阶段 

检查 装载 阶段 主要 执行 变量 的 声明 和 函数 的 声明 ， 因 此 上 述 代码 在 检查 闭 载 阶段 执行 下 
面 几 行 代码 。 














GD var num; 
© function func10{} 
@) var func2; 








执行 完 上 述 代 码 ，funcl 为 声明 完成 的 函数 ，num 和 func2 都 应 该 是 值 为 undefined 的 











变量 


和 





2， 代码 执行 阶段 
代码 执行 阶段 主要 执行 变量 的 赋值 、 函 数 的 调用 等 语句 ， 因 此 上 述 代码 在 代码 执行 阶段 
执行 下 面 几 行 代码 。 







































































GD consoloe.log(num); 
© num = 10; 

@ func10; 

@ func20; 

© func2 = functionO{} 


JavaScript 代码 的 执行 顺序 问题 需要 各 位 读者 重点 理解 。 














13.5 章节 案例 : 编写 函数 统计 任意 区 间 内 的 质数 


写 一 个 函数 ， 功 能 是 求 某 区 间 内 的 质数 ， 调 用 这 个 函数 求 出 1 一 10 区 间 内 的 质数 ， 并 使 
用 “-” 连 接 每 个 质数 ， 输 出 一 个 字符 串 。 例 如 输出 结果 “2-3-5-7”。 
【案例 代码 】 














<Script type=" text/javascript"> 
function func(start,end){ 
/ 循环 取出 start-end 中 的 每 一 个 数 


Varistt = 





Var count = 0; 
for(var i=start; 1<=end; 1++){ 
/ 判断 每 个 数字 i， 是 否 为 一 个 质数 
var notZhi = false; 
for(var j=2; j<i; j++){ 
1f(1%j==0){ 
notZhi = true; 





break; 
} 
} 
if(notZhi == false && il=1){ 
count ++; 
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if(count==1) str += 1; 


else Str += “一 十 1 
| 
} 
return str; 
} 
console.log(func(1,10)); 
</script> 


代码 运行 后 ， 输 出 结果 如 图 13-6 所 示 。 














Elements Console Sources Network Performance » 


Default levels 


第 十 四 章 章 节 案 例 .html? hbt=1513983295317:29 














图 13-6 求 出 1~10 区 间 内 的 质数 








【章节 练习 】 

1. 声明 匿名 函数 有 哪 三 种 方式 ? 

2. 自 执 行 函数 的 三 种 写法 分 别 是 什么 ? 

【上 机 练习 】 

1. 使 用 函数 实现 计算 器 功能 。 有 具体 要 求 是 使 用 prompt 输入 两 个 数 和 运算 符号 ， 然 后 计 
算 两 个 数 的 操作 结果 ， 使 用 switch 判断 运算 符号 ， 调 用 函数 计算 两 数 的 结果 。 

2. 使 用 递归 分 别 计算 1+2+3+…+10 和 11+2!+3!+*…+10!。 
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JavaScript 由 三 部 分 组 成 ， 分 别 是 BCMAScript BOM 和 DOM。 通 过 前 面 的 学 习 ， 读 者 
已 经 了 解 了 ECMAScript 的 基本 内 容 ， 本 章 学 习 BOM 和 DOM。 

本 章 学 习 目标 ; 

> 掌握 BOM 的 对 象 及 对 象 属性 。 

> 掌握 Core DOM 中 各 种 操作 节点 的 方法 。 

> 掌握 HIML DOM 中 操作 表格 、 行 、 单 元 格 的 方法 。 

通过 本 章 的 学 习 ， 可 以 更 便捷 地 对 浏览 器 的 内 署 对 象 进行 控制 ， 也 可 以 更 灵活 地 操作 
HTML 中 的 各 种 节点 ， 提 高 HTML 页 面 的 动态 效果 ， 增 强 用 户 体验 。 
























































14.1 window 对 象 


浏览 器 对 象 模型 (Browser Object Model，BOM) 使 JavaScript 有 能 力 与 浏览 器 “对 
话 ”。 由 于 现代 浏览 器 几乎 实现 了 JavaScript 交互 性 方面 的 相同 方法 和 属性 ， 所 以 常 被 认为 
BOM 的 方法 和 属性 。BOM 由 多 个 对 象 组 成 ， 其 中 代表 浏览 器 窗口 的 window 对 象 是 BOM 
的 顶层 对 象 ， 其 他 对 象 都 是 该 对 象 的 子 对 象 ， 如 图 14-1 所 示 。 





































































history location navigator 






anchors forms location 


图 14-1 window 对 象 模型 





1411 window0U OOOD 


所 有 浏览 器 都 支持 window 对 象 。window 对 象 表示 浏览 器 窗口 。 所 有 JavaScript 全 局 
对 象 、 函 数 、 变 量 均 自动 成 为 window 对 象 的 成 员 。 

全 局 变量 是 window 对 象 的 属性 。 全 局 函数 是 window 对 象 的 方法 。window 对 象 主要 
包括 以 下 属性 ， 见 表 14-1。 
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表 14-1 window 对 象 的 主要 属性 









































属 性 含义 
Screen 有 关 客 户 端 的 屏幕 和 显示 性 能 的 信息 
history 有 关 客 户 访 问 过 的 URL 的 信息 
location 有 关 当 前 URL 的 信息 
navigator 包含 有 关 浏览 器 的 信息 
document 窗口 中 显示 的 文档 对 象 
frames 返回 窗口 中 所 有 命名 的 框架 























:土产 
) 王 意 : 


对 象 ， 具 有 自己 的 属性 和 方法 ， 有 具体 





青 况 会 在 


1412 windowUUODOODODODO 
































有 些 window 对 象 的 属性 本 身 也 是 对 象 。 其 中 ， 表 格 14-1 中 的 前 五 个 属性 也 是 


介绍 


I 


下 一 小 节 进行 



































































































































































































































window 对 象 中 除了 有 很 多 的 属性 之 外 ， 还 有 很 多 的 方法 ， 而 且 这 些 方法 大 多 是 开发 过 
程 中 常用 的 方法 。 
需要 注意 的 是 ，window 对 象 中 的 所 有 方法 均 可 以 省 略 前 面 的 window， 比 如 close0。 
1，windovw 弹 窗 的 输入 输出 
1) promptO: 弹 窗 接收 用 户 输入 ， 第 12 章 已 经 介绍 过 。 
2) alert0: 弹 窗 警 告 ， 第 12 章 已 经 介绍 过 。 
3) confirm(O): 带 有 确认 或 取消 按钮 的 提示 框 ， 第 12 章 也 已 经 介绍 过 。 
2. open( 与 close0 
1) open0: 重新 打开 一 个 窗口 ， 主 要 传 入 三 个 参数 : URL 地 址 、 窗 口 名称 、 窗 口 特征 。 
代码 示例 如 下 : 
function open WindowO{ 
window.open("http://www.baidu.com"," 百度 一 下","height=700px,width=1000px，top=200px, 
left=300px"); 
ed onclick="openWindow0O"> 打 开 一 个 新 的 浏览 器 窗口 </button> 
上 述 代码 运行 后 ， 单 击 按钮 将 会 打开 一 个 新 的 浏览 器 窗口 ， 其 宽度 是 1000px， 高 度 是 
700px， 距 离 屏 幕 左 边 300px， 距 离 屏 幕 上 边 200px。 
窗口 特征 主要 设置 的 就 是 这 4 个 值 ， 其 他 可 选 值 可 以 查阅 帮助 文档 了 解 。 






































2) close0: 关闭 浏览 器 的 当前 选项 卡 。 


function closeWindowO{ 


window.close(); 


} 
<button onclick="closeWindow0O"> 关 闭 当前 








口 





</button> 








3. setTimeout( 与 clearTimeoutO 


1) setTimeoutO: 设置 延 时 执行 (以 ms 为 单位 计时 )， 只 会 执行 
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2) clearTimeoutO: 清除 延 时 ， 传 入 参数 : 调用 setTimeout 时 返回 一 个 这， 通过 变量 接 
收 id， 传 入 clearTimeout。 
代码 示例 如 下 : 


/ 设置 延 时 执行 
vartimeOutId = setTimeout(function0{ ”// 将 延 时 器 方法 赋值 给 变量 timeOutId 
console.log("jereh"); 


},2000); V 延 时 2s 后 控制 台 打 印 jereh 












































/ 使 用 延 时 器 清除 延 时 
setTimeout(function(){ 

clearTimeout(timeOutId); ，// 在 clearTimeout 方法 里 面 传 入 变量 timeOutId 
},5000); / 5s 后 清除 延 时 器 























执行 上 述 代 码 后 ， 将 会 在 2s 后 ， 在 控制 台 打 印 出 一 个 “jereh”， 并 在 5s 后 清除 该 延 
时 器 。 

4. setImterval0 与 clearInterval0 

1) setInterval0: 设置 定时 器 ， 循 环 每 个 N 毫秒 执行 一 次 ， 两 个 参数 : 需要 执行 的 
function / 毫秒 数 。 

2) clearInterval0: 清除 定时 器 ， 传 入 参数 : 调用 setInterval 时 返回 一 个 id， 通 过 变量 接 
收 id， 传 入 clearInterval。 

下 面 是 一 段 定 时 器 、 延 时 器 的 代码 示例 : 


/设置 定时 器 

var interValId = 0{ V 将 定时 器 方法 赋值 给 变量 interValld 
console.log(" 杰 瑞 教 育 

},1000); 































































































/ 5s 后 清除 定时 器 
setTimeout(function(){ 


clearInterval(interValId); // 将 声明 Interval 返回 的 id， 传 入 clearInterval 
},5000); 








定时 器 每 1s 打印 一 个 “ 杰 瑞 教 育 ” 并 且 使 用 延 时 器 设置 了 5s 后 清除 定时 器 。 最 终 效 
果 如 图 14-2 所 示 ， 共 打印 5 个 杰 瑞 教 育 。 























[x | Elements (Console Sources Networ Performance Memory Applicatio 


© top ilte Default levels 了 


日 本 再 教育 92- 定 时 器 、 延 时 器 .html3 
> 

















图 14-2 定时 器 、 延 时 器 方法 的 应 用 效果 
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14.2 浏览 器 对 象 模 型 的 其 他 对 象 


在 JavaScript 中 ， 除 了 最 常用 的 window 对 象 ， 还 有 很 多 常用 的 其 他 对 象 ， 如 screen 对 
象 、location 对 象 、history 对 象 等 。 这 些 对 象 都 是 包含 在 window 对 象 里 面 的 ， 以 screen 对 象 
为 例 ， 可 以 使 用 window.screen 表示 ， 当 前 也 可 以 省 略 window 直接 使 用 screen 表示 。 


14.2.1 Screenl DODOOD 


Screen 对 象 包含 有 关 客户 端 显示 屏幕 的 信息 ， 有 四 个 常用 属性 ， 分 别 是 屏幕 宽度 、 屏 幕 
高 度 、 可 用 宽度 和 可 用 高 度 。 


screen.width; /屏幕 宽度 

Screen.height; /屏幕 高 度 

screen.avail Width; /屏幕 可 用 宽度 

screen.availHeight; /屏幕 高 度 = 屏幕 高 度 -底部 工具 栏 










































































注意 : 

> 当 Windows 桌面 的 任务 栏 在 底部 或 上 部 时 ， 可 用 高 度 等 于 屏幕 高 度 减 去 底部 任务 栏 
高 度 ， 可 用 宽度 等 于 屏幕 宽度 。 

> 当 Windows 桌面 的 任务 栏 在 左 侧 或 右 侧 时 ， 可 用 宽度 等 于 屏幕 宽度 减 去 底部 任务 栏 
高 度 ， 可 用 高 度 等 于 屏幕 高 度 。 


另外 ，screen 作为 window 对 象 属性 时 ， 可 以 显示 页 面 的 屏幕 的 相关 信息 。 基 本 语法 如 下 : 





























console.log(window. Screen); 


代码 示例 如 下 : 


<script type=" text/javascript"> 
console.log(screen);。/* screen 对 象 里 面 所 包含 的 所 有 信息 六 
console.log(screen.availHeight); /* 屏幕 的 有 效 高 度 */ 
</script> 


打印 效果 如 图 14-3 所 示 。 














[x | Elements Console Sources Network Performance Memory Application Security 


[WY) top Filte Default levels 了 
Screen.htm13 hbt=1512181389791:18 
> Screen {availWidth: 1928，avotLHetght: 1848, width: 1928, height: 1888, cotLorDel 2 24, - 
1640 screen.html? hbt=1512181389791:1 
> 











图 14-3 ”screen 对 象 效果 
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14.2.2 locationlDODDODO 


location 对 象 包含 有 关 当 前 URL 的 信息 。 它 存储 在 window 对 象 的 location 属 1 
表示 那个 窗口 中 当前 显示 的 文档 的 Web 地 址 ， 可 通过 window.location 属性 来 访问 。 
location 作为 window 对 象 属性 时 ， 可 以 设置 页 面 跳 转 。 基 本 语法 如 下 : 








er a 


生 中 ， 





























3 



































window.location = "http:/www.baidu.com ; 














性 和 方法 前 ， 首 先 要 了 解 完 整 的 URL 路 径 包 括 哪些 内 


在 学 习 location 对 象 有 哪些 属 
面 就 是 一 个 完整 的 URL 路 径 中 包含 的 所 有 部 分 。 



























































容 。 下 面 
完整 的 URL 路 径 ; 
协议 名 :// 主 机 名 (IP 地 址 ): 端 口号 /文件 路 径 ? 传 递 参 数 mamel=valuel&name2=value2)# 锚 点 
例如 : 


http:/127.0.0.1:8080/wenjianjia/index.html2name=jredu#top 














location 对 象 的 href 属性 存放 的 是 文档 的 完整 URL， 其 他 属性 则 分 别 描述 了 URL 的 
各 个 部 分 。location 对 象 常 用 属性 见 表 14-2。 









































表 14-2 location 对 象 的 常用 属性 





































































































属 性 说 明 
href 完整 路 径 
Protocol 使 用 的 协议 (http、https、ftp、file、mailto) 
pathname 文件 路 径 
port 端口 号 
search 从 ?开始 往 后 的 部 分 
hostname 主机 名 (IP 地址 ) 
host 主机 名 和 端口 号 
hash 从 # 开 始 的 锚 点 
代码 示例 如 下 : 
console.log(location); // 取 到 浏览 器 的 完整 URL 信息 
location.href: // 返 回 当前 完整 路 径 
location.protocol; /返回 协议 名 http:// 
location.host; /返回 主机 名 + 端口 号 。 127.0.0.1:8080 
location.hostname; /返回 主机 名 127.0.0.1 
location.port; /返回 端口 号 :8080 
location.pathname; /返回 文件 路 径 
location.search; /返回 ?开头 的 参数 列表 
location.hash; /返回 # 开 头 的 锚 点 


























除了 URL 属性 外 ，location 对 象 还 具有 三 个 常用 方法 。location 对 象 的 reload0 方法 
可 以 重新 装载 当前 文档 ; replace0 方 法 可 以 装载 一 个 新 文档 而 无 须 为 它 创 建 一 个 新 的 历史 记 
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录 ， 即 在 浏览 器 的 历史 列表 中 ， 新 文档 将 蔡 换 当前 文档 assign0 方 法 可 以 加 载 新 的 文档 。 具 
体 见 表 14-3。 








表 14-3 location 的 常用 方法 



































方 ” 法 说 明 
assign() 0 载 新 的 文档 
replace() 新 的 文档 替换 当前 文档 
reload() 重新 加 载 当前 文档 
代码 示例 如 下 : 


function locationAssienO{ 


location.assign("http://www.baidu.com"); // 加载 新 的 文档 ， 加 载 以 后 ， 可 以 后 退 
} 


function locationReplace(){ 
location.replace("http://www.baidu.com"); // 使 用 新 的 文档 蔡 换 当前 文档 ， 蔡 换 以 后 不 能 后 退 


























} 
function locationReloadO{ 
location.reload(true); // 重新 加 载 当前 页 面 





} 


<button onclick="locationReplace()">replace </button> 
<button onclick="locationAssign()">assign</button> 
<button onclick="locationReload()">reload</button> 





assign() 方 法 的 效果 如 图 14-4 所 示 。 


C | @ 安全 | https://www.baidu.com 


Baid 百度 


/和 

















图 14-4 ”assign0 方 法 的 效果 图 





注意 : reloadO 传 参与 不 传 参 情况 的 区 别 ， 当 reload(true) 时 ， 表 示 从 服务 器 重新 加 载 当前 
页 面 ; 而 当 reload0 不 传 参 时 ， 表 示 在 本 地 刷新 当前 页 面 。 


14.2.3 historyJDUDDODOODODOD 
history 对 象 包含 用 户 “〈 在 浏览 器 窗口 中 ) 访问 过 的 URL。 它 是 window 对 象 的 一 部 
分 ， 可 通过 window.history 属性 对 其 进行 访问 。 基 本 语法 如 下 : 


















































console.log(window.history); 
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history 对 象 是 浏览 器 历史 记录 相关 的 对 象 ， 包 括 了 一 个 length 属性 表示 历史 列表 的 
URL 数量 ， 还 包括 三 个 常用 方法 ， 见 表 14-4。 





表 14-4 history 对 象 的 属性 和 方法 






























































属性 或 方法 说 明 
length 返回 浏览 器 历史 列表 中 的 URL 数量 
backO) 加 载 history 列表 中 的 前 一 个 URL， 与 在 浏览 器 中 单 击 后 退 按钮 相同 
forward() 加 载 history 列表 中 的 下 一 个 URL， 与 在 浏览 器 中 单 击 按钮 向 前 相 刁 
5 位 置 标志 : ”当前 页 为 第 0 个 ， 前 一 个 页 面 第 1 个 ， 后 一 
代码 示例 如 下 : 


history.length; // 浏览 历史 列表 个 数 
history.back0; / 后 退 
history.forward(); // 前 进 


效果 如 图 14-5 所 示 。 


Performance Memory Application Security 


Default levels Y 


Pp History 
1 
f back() { [native code] } 


fF forward() { [native code] } 


Console 





图 14-5 history 对 象 效果 
下 面 介绍 history 对 象 的 g00 方 法 。 代 码 示 例如 下 : 


<button onclick="go()">history.go</button> 
function goO{ 
history.go(-1); /x* 跳 转 到 浏览 历史 的 任意 界面 ，0 表示 当前 页 面 ，-1 表示 后 一 页 (back); 
1 表示 前 一 页 (forward) 六 
} 
































执行 上 述 代 码 ， 单 击 “history.go” 按 钮 ， 页 面 跳 转 到 后 一 页 。 当 history.go0 中 传 入 参数 
为 1 时 ， 表 示 前 一 页 ， 相 当 于 forward0; 当 history.go0 中 传 入 参数 为 -1 时 ， 表 示 后 一 页 ， 相 
当 于 back 0; 当 history.go0 中 传 入 参数 为 0 时 ， 表 示 当 前 页 。 


14.24 _ navigator DODODODOD 
navigator 对 象 包 含 了 有 关 浏 览 器 基本 配置 的 各 种 信息 ， 所 包含 的 属性 较 多 。 在 此 只 介绍 
儿 个 常用 属性 ， 见 表 14-5。 
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表 14-5 navigator 对 象 的 属性 


















































属 性 说 明 
appName 产品 名 称 
appVersion 产品 版 本 号 
userAgent 户 代理 信息 
platform 系统 平台 
plugins 返回 一 个 数组 ， 检 测 浏览 器 安装 的 所 有 插件 
MimeTypes 检查 浏览 器 安装 的 插件 支持 的 文件 类 型 











navigator 对 象 中 的 各 种 属性 ， 仅 仅 是 用 来 查询 显示 的 ， 在 实际 开发 过 程 中 用 的 并 不 算 
多 。 使 用 “navigator.appName” 即 可 查看 浏览 器 产品 名 称 ， 其 他 属性 此 处 不 再 袭 述 。 
下 面 重 点 了 解 plugins 属性 。 它 可 以 查看 浏览 器 安装 的 所 有 插件 ， 包 括 四 个 属性 。 
1) description: 插件 的 描述 信息 。 
2) filename: 插件 在 本 地 磁盘 的 文件 名 。 
3) length: 插件 的 个 数 。 
4) name: 插件 名 。 
基本 语法 如 下 : 


navigator.plugins; V/ 监测 浏览 器 安装 的 各 种 插件 
控制 台 输 出 效果 如 图 14-6 所 示 。 







































































图 14-6 ”navigator 对 象 的 plugins 属性 可 查看 浏览 器 安装 的 插件 


每 个 浏览 器 都 具有 自己 独到 的 扩展 ， 所 以 在 开发 阶段 来 判断 浏览 器 是 一 个 非常 重要 的 步 
了 又。 虽然 浏览 器 开发 商 在 公共 接口 方面 投入 了 很 多 精力 ， 努 力 去 支持 最 常用 的 公共 功能 ， 但 
在 现实 中 ， 浏 览 器 之 间 的 差异 ， 以 及 不 同 浏览 器 的 兼容 性 因此 客户 端 检测 是 一 种 补救 措施 ， 
更 是 一 种 行 之 有 效 的 开发 策略 。 









































14.3 Core DOM 


文档 对 象 模型 (DOM) 是 万 维 网 联盟 (W3C) 的 标准 。DOM 定义 了 访问 HTML 和 
XML 文档 的 标准 。W3C DOM 是 中 立 于 平台 和 语言 的 接口 ， 它 允许 程序 和 脚本 动态 地 访问 
和 更 新 文档 的 内 容 、 结 构 和 样式 。 
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W3C DOM 标准 被 分 为 三 个 不 同 的 部 分 : 

1) Core DOM 是 核心 DOM， 定 义 了 一 套 标准 的 针对 任何 结构 化 文档 的 对 象 ， 包 括 
HTML、XHTML 和 XML。 核心 DOM 适合 操作 节点 ， 如 创建 、 删 除 、 查 找 等 。 

2) XML DOM 定义 了 所 有 XML 元 素 的 对 象 和 属性 ， 以 及 访问 它们 的 方法 。 

3) HIML DOM 定义 了 所 有 HTML 元 素 的 对 象 和 属性 ， 以 及 访问 它们 的 方法 。HTML 
DOM 适合 操作 属性 ， 如 读 取 或 修改 属性 的 值 等 。 
于 XML 并 不 是 学 习 的 重点 内 容 ， 所 以 接 下 来 的 章节 着 重 讲解 Core DOM 与 HIML 
DOM 两 部 分 的 内 容 。 
当 网 页 被 加 载 时 ， 浏 览 器 会 创建 页 面 的 文档 对 象 模型 。Document 对 象 使 用 户 可 以 从 脚 
本 中 对 HTML 页 面 中 的 所 有 元 素 进行 访问 。 另 外 ，Document 对 象 是 window 对 象 的 一 部 


分 ， 可 通过 window.document 属性 对 其 进行 访问 。 
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DOM 节点 分 为 三 大 类 : 元 素 节 点 、 文 本 节点 、 属 性 节点 。 其 中 ， 元 素 节 点 又 叫 标签 节 
点 ， 指 文档 中 的 各 种 HTML 标签 ， 文 本 节点 和 属性 节点 为 元 素 节点 的 两 个 子 节点 ， 分 别 表 
示 标 签 中 的 文字 和 标签 的 属性 。 通 过 getElement 系列 方法 ， 可 以 取 到 元 素 节点 。DOM 树 结 
构 如 图 14-7 所 示 。 
























































文档 ;document 


根 节点 : <html> 






元 素 节 点 : <head> 元 素 节 点 : <body> 





网 性 市 点 ， "sre" 


文本 节点 : DOM 对 象 文本 节点 DOM 树 





图 14-7 DOM 树 结构 


14.3.2 0UD0OO0O0D00 
在 DOM 操作 中 ， 操 作 元 素 节 点 是 最 基础 的 一 步 ， 使 用 HTML 操作 任何 内 容 都 需要 选中 
一 个 标签 ， 才 能 对 标签 以 及 标签 的 文字 、 属 性 、 样 式 进行 修改 。 

1. getElementBylId 

getElementById0 方法 可 返回 对 拥有 指定 id 的 第 一 个 对 象 的 引用 。 如 果 需 要 查找 文档 中 
一 个 特定 的 元 素 ， 最 有 效 的 方法 是 getElementById0 。 在 操作 文档 中 一 个 特定 的 元 素 时 ， 最 
好 给 该 元 素 一 个 id 属性 ， 为 它 指定 一 个 《在 文档 中 ) 唯一 的 名 称 ， 然 后 就 可 以 用 此 id 查 
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找 想 要 的 元 素 。 
代码 示例 如 下 : 


<div id="box" >div 文字 </div> 
var divByld = getElementById("box'"); 


注意 : 通过 id 获取 唯一 的 节点 ， 如 果 存 在 多 个 同名 这 ， 则 只 会 选取 第 一 个 。 


2. getklementsByName / gettlementsTagName / getElementsClassName 

通过 Name、TagName、ClassName 取 到 一 个 数组 ， 包 含 多 个 节点 。 

它们 的 使 用 方式 是 ， 通 过 循环 取 到 每 一 个 节点 。 而 循环 的 次 数 是 从 0 开始 ， 直 到 数组 的 
最 大 长 度 后 结束 。 使 用 方法 代码 示例 如 下 ; 


<div name="div1" class="div2">div 文字 </div> 

Var divVByName = getElementsByName("div1"); 

var divByTagName = getElementsByTagName("div'"); 

var divByClassName = getElementsByClassName("div2"); 
























































3. document.querySelector / querySelectorAll 

querySelector() 方法 仅仅 返回 匹配 指定 CSS 选择 器 的 第 一 个 元 素 。 如 果 需 要 返回 所 有 的 
元 素 ， 则 使 用 querySelectorAll0 方法 替代 。 

代码 示例 如 下 : 



































document.querySelector("#demo"); 
执行 上 述 代 码 ， 获 取 文 档 中 id="demo” 的 元 素 。 
注意 : 圆 括 号 “0” 中 传 入 参数 指定 一 个 或 多 个 匹配 元 素 的 CSS 选择 器 。 可 以 使 用 它 
们 的 和 这、 类、 类型、 属性 、 属 性 值 等 来 选取 元 素 。 对 于 多 个 选择 器 ， 使 用 去 号 隔 开 ， 返 回 
一 个 匹配 的 元 素 。 








14.3.3 0UDO0OO0ODODO 
在 DOM 操作 中 ， 操 作 元 素 节 点 取 到 标签 节点 后 ， 接 下 来 就 可 以 通过 JavaScript 中 提供 
的 方法 对 标签 中 的 文字 进行 获取 、 修 改 操作 。 

1，tagName 

tagName 属性 返回 元 素 的 标签 名 ， 即 获取 节点 的 标签 名 。 在 HTML 中 ，tagName 属性 
的 返回 值 始终 是 大 写字 母 。 

代码 示例 如 下 : 

































































<div id="div"> </div> 

<button id="btn"> 单 击 </button> 

<script type=" text/javascript"> 
Var btn = document.getElementById("btn'"); 
var div = document.getElementById("div'"); 
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btn.onclick = function0{ /* 单 击 按钮 弹出 对 话 框 */ 
alert(div.tagName); 
} 


</script> 
代码 运行 效果 如 图 14-8 所 示 。 
D 127.0.0.1:8020/ 教 材 /15 x 全 


G | 127.0.0.1:8020/ 烤 材 /15/03- 核 心 DOM/02/03- 操 作 DOM 古 点 html?_.. 女 | 人 @ 
点 击 这 黑 导 入 书 3 


127.0.0.1:8020 显示 : 
单 击 Dv 








图 14-8 tagName 属性 获取 节点 的 标签 名 








2. innerHTML 

innerHTML 属性 设置 或 返回 表格 行 的 开始 和 结束 标签 之 间 的 HIML， 即 设置 或 者 获取 
节点 内 部 的 所 有 HTML。 

代码 示例 如 下 : 


<div id="box"> </div> 
<button id="btn"> 单 击 </button> 
<script type="text/javascript"> 
var btn = document.getElementById("btn ); 
var div = document.getElementByld("box"); 
btn.onclick = functionO{ 
div.innerHTML = "<h1> 杰 瑞 教 育 </h1>" 
alert(div.innerHTMIL); 












































} 


</script> 


代码 运行 效果 如 图 14-9 和 图 14-10 所 示 。 


六 127.0.0.1:8020/ 教 材 /15 x 


GG | © 127.0.0.1:8020/ 教 材 /15/03- 核 必 DOM/02/03- 操 作 DOM 节 点 html?_... 女 | @ 


击 这 里 导入 书 4 a 
ee 127.0.0.1:8020 显示 : 下 
单 击 | <h1> 杰 璃 教育 </h1> 














图 14-9 单 击 按钮 后 的 弹出 显示 效果 
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六 127.0.0.1:8020/ 教 材 /15 x 
GG |@ 127.0.0.1:8020/ 教 材 /15/03- 核 心 DOM/02/03- 操 作 DOM 节 点 .html?__... 
单 击 这 里 导入 书签 。 开始 


杰 瑞 教育 


FF 





图 14-10 弹 窗 单 击 “ 确 定 ” 按 钮 后 的 页 面 显示 效果 








从 上 述 图 片 可 以 看 出 ， 代 码 执行 时 ， 单 击 按钮 后 首先 执行 的 是 alert 弹 窗 ， 弹 窗 中 显示 
内 容 为 “<hl> 杰 瑞 教育 <hl> ”， 即 代码 中 所 设置 的 innerHTML 中 的 内 容 ， 单 击 “ 确 定 ” 按 








钮 后 ， 页 面 <div> 中 的 内 容 显示 为 <hl> 标 签 中 的 内 容 。 
3. innerText 








innerText 属性 用 来 定义 对 象 所 要 输出 的 文本 ， 即 它 可 以 用 来 设置 或 者 获取 节点 内 部 的 所 


























有 文字 。 
代码 示例 如 下 : 


<div id="div"> </div> 
<button id="btn"> 单 击 </button> 
<script type="text/javascript"> 
var btn = document.getElementById("btn ); 
var div = document.getElementById("div ); 
btn.onclick = functionO{ 
div.innerText = " 杰 瑞 教育 " 
alert(div.innerText); 





} 


</script> 


单 击 按 钮 后 ， 效 果 如 图 14-11 和 图 14-12 所 示 。 





口 127.0.0.1:8020/ 教 材 /15 x We 和 


CG |1@ 127.0.0.1:8020/ 教 材 /15/03- 核 心 DOM/02/03- 操 作 DOM 节 点 .html?_.… 


单 击 这 里 导入 书 4 加 
127.0.0.1:8020 显示 : x | 


单 而 杰 瑞 教育 





图 14-11 单 击 按钮 后 的 弹出 显示 效果 











IO 


207 


Web 前 端 学 习 笔 记 : HTML5+CSS3+JavaScript 


口 127.0.0.1:8020/ 教 材 /15 x 邮 
G | @ 127.0.0.1:8020/ 教 材 /15/03- 核 


点 击 这 里 导入 书签 。 开始 


杰 瑞 教育 


单 击 | 














图 14-12 单 击 “ 确 定 ” 按 钮 后 的 页 面 显 示 效 果 








学 习 了 文本 节点 的 操作 后 ， 下 面 来 梳理 一 下 innerHTML 与 innerText 的 区 别 。 通 过 上 面 
两 个 示例 ， 可 以 看 出 : 
1) innerHTML 指 的 是 从 对 象 的 起 始 位 置 到 终止 位 置 的 全 部 内 容 ， 包 括 HTML 标签 

2) innerText 指 的 是 从 起 始 位 置 到 终止 位 置 的 内 容 ， 但 它 去 除 HTML 标签 。 
innerText 只 适用 于 下 浏览 器 (现在 也 适应 Chrome 浏览 器 )， 而 innerHTML 是 符合 
W3C 标准 的 属性 。 因 此 ， 尽 可 能 地 使 用 innerHTML， 而 少 用 innerText。 


14.3.4 [DDD 

在 DOM 操作 中 ， 操 作 元 素 节点 取 到 标签 节点 后 ， 接 下 来 就 可 以 通过 JavaScript 中 提供 
a 修改 操作 。 人 

1. 查看 属性 节点 

getAttribute0 回 指 定 属 性 名 的 属性 值 ， 如 果 以 attr 对 象 返回 属性 ， 则 需要 使 用 
getAttributeNode。 基 本 语法 如 下 ; 


























































































































getAttribute(" 属 性 名 "); 


代码 示例 如 下 : 


document.getElementsByTagName("a")[0].getAttribute( "target"); 








执行 上 述 语句 ， 获 得 a 标签 的 target 属性 为 “_blank”。 
2. 设置 属性 节点 
setAttribute() 方法 添加 指定 的 属性 ， 并 为 其 赋 指定 的 值 。 如 果 这 个 指定 的 属性 已 存在 ， 
则 仅 设 置 或 更 改 属性 值 。 基 本 语法 如 下 : 
setAttribute(" 属 性 名 "," 属 性 值 "); 


代码 示例 如 下 : 


<button onclick="getAttr0"> 取 到 a 的 href 属性 值 </button> 
<button onclick="setAttr0"> 修 改 a 的 href 属性 值 </button> 
<a href="http://www.baidu.com" id="al1"/> 这 是 一 个 超 链接 </a> 
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第 14 章 BOM 与 DOM 


var al = document.getElementByld("al"); 


alert(al.getAttribute("href")); 


} 
function setAttrO{ 


var al = document.getElementByld("al"); 
al.setAttribute("href","http://www.jredul00.com"); 


console.log(al .href); 
} 





代码 运行 后 效果 如 图 14-13 所 示 ， 单 击 第 一 个 按钮 后 在 控 币 




















| 台 看 到 地 址 http://www. 











baidu.com ， 单 击 第 二 个 按钮 会 改变 超 链 接 的 地 址 并 在 控制 台 打 印 输 出 新 地 址 


http:/www.jredu100.com 。 


取 到 a 的 href 尾 性 值 
| 修改 a 的 href 属 性 值 | 
这 是 一 个 超 链接 











h15_02.html?_hbt=1 


Network » 











14.3.5 javaScriptU DUODODOD 








图 14-13 属性 节点 操作 效果 


学 习 了 前 面 的 几 种 操作 DOM 的 方法 后 ， 可 以 先 操作 元 素 节 点 取 到 标签 节点 ， 然 后 通过 
JavaScript 中 提供 的 方法 对 标签 元 素 的 样式 进行 修改 。 修 改元 素 样式 的 方法 主要 有 以 下 


三 种 。 


1. className 











className。 基 本 语法 如 下 : 
div.className = "cls1"; 


2. style 


























则 。 基 本 语法 如 下 : 
div.style.backgroundColor = "red"; 


3. style.cssText 


style.cssText 为 元 素 同 时 修改 多 个 检 


使 用 style 设置 单个 属性 ， 为 元 素 设 置 一 个 新 的 样式 ， 注 意 属 性 名 要 使 用 小 怠 峰 命名 法 





























使 用 className 直接 设置 class 类 ， 为 元 素 设置 一 个 新 的 class 名 字 ， 注 意 写法 是 


























tT 


| 











EF 式 。 使 用 style 或 style.cssText 可 以 设置 多 个 样式 属 
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性 。 基 本 语法 如 下 : 





div.style = "background-color:red;color:yellow;” 
div.style.cssText = "background-color:red:color:yellow;” V/ 推荐 使 用 第 三 种 ， 有 输入 提示 


下 面 是 一 段 修改 元 素 样 式 的 综合 代码 示例 。HTML 部 分 代码 如 下 : 




















<button onclick="cssByClassName()"> 通 过 className 修改 字号 </button> 
<button onclick="cssByStyle0"> 通 过 style 修改 字号 </button> 

<button onclick="cssByCssText()"> 通 过 style.cssText 修改 字号 </button> 
<div id="div2" name="div2" class="div">div 文字 </div> 


CSS 部 分 代码 如 下 : 


.div{ 

font-size: SOpx; 
} 
.div2{ 

font-size: 16px; 


} 
JavaScript 部 分 代码 如 下 : 


function cssByClassName(O){ 
Var div2 = document.getElementByld("div2"); 
div2.className = "class2"; 


} 

function cssByStyleO{ 
var div2 = document.getElementById("div2"); 
div2.style.fontSize = "30px"; 

} 


function cssByCssTextO{ 
Var div2 = document.getElementById("div2"); 
div2.style.cssText = "font—size: SOpx;"; 


} 
代码 运行 效果 如 图 14-14 所 示 。 





人 











DD soM5SDOM 


© | ©12700.1 


通过 className 修 站 字号 

通过 style 眉 改 部 号 

通过 style.css Text 修 疏 李 号 
div 文 字 











图 14-14 JavaScript 修改 CSS 样式 (一) 
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div 中 的 文字 默认 字体 大 小 为 50px， 可 以 通过 三 个 按钮 来 修改 其 字体 大 小 。 单 击 “ 通 过 
className 修改 字号 ”按钮 会 为 div 添加 一 个 class="div2"， 字 号 也 会 变 小 ， 效 果 如 图 14-15 所 示 。 








GC | @ 127.0.0.1:8020/HelloWorld/JavaScript/ch15_02.html?_hbt=1.. 公 | : 


通过 className 修 改 字 号 
通过 style 修 改 字 号 
通过 style.cssText 修 改 字 号 


div 文 字 





图 14-15 





[RO | Elements Console » x 


</body> 
rim bowy 


Styles | Computed EventListeners » 





Filter :hov .cls 十 ， 
element -style { 
} 
div { Shl5 92.htm1? .06500320392:48 
font-size: S50px; 





了 








Console 


JavaScript 修改 CSS 样式 〈 二 ) 


单 击 第 二 个 按钮 时 ， 会 为 div 添加 一 个 行内 样式 ， 字 号 被 修改 为 30px， 如 图 14-16 所 示 。 


口 BoMSDOM 





© | @ 127.0.0.1:8020/HelloWorld/JavaScript/ch15_02.html?_hbt=1..， 会 | 





通过 className 修 改 字 号 
通过 style 修 改 字 号 
通过 style.cssText 修 改 字 号 


div 文 字 








民品 | Elements Console » 
style.cssText 候 改 训 号 </button> 
<div id="div2” name="div2” class="class2" 
style="font-size: 39pxj7> 
div 文 字 
</div> == $6 


x 


html body EEC 
Styles | Computed Event Listeners » 
Filter 


element .style { 
font-size: 30px; 


div { 


user agent stylesheet 
display: block; 








Console x 


图 14-16 ”JavaScript 修改 CSS 样式 (三) 


再 单 击 第 三 个 按钮 ， 会 发 现行 内 样式 又 被 修改 为 50px， 效 果 如 图 14-17 所 示 。 


D BoMSDOM 


Cc |O 127.0.0.1:8020/HelloWorld/JavaScript/ch15_02.html?_hbt=1... 妆 | ; 





通过 className 修 改 字 号 
通过 style 修 改 训 号 
通过 style.cssText 修 改 训 号 


div 文 字 





在 使 用 style 和 style.cssText 
样式 来 实现 样式 修改 的 ， 如 果 要 








民 器 | Elements Console » 
style.cssText 修 改 享 号 </button> 


<div id="div2” name="div2” class="class2" 
style="font-size: 50px;"”> 回 
div 文 字 
</div> == 36 : 


html body Ee 


x 


Styles | Computed Event Listeners » 
Filter 


element .style { 
font-size: S58px; 
div { 

display: block; 








Console 


图 14-17 JavaScript 修改 CSS 样式 〈 四 ) 


金 改 样式 时 ， 需 要 注意 这 两 种 方式 都 是 通过 给 元 素 添加 行内 
进行 样式 修改 也 只 能 使 用 行内 样式 修改 。 
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14.36 0UDO0O00D0D0 
文档 中 所 有 节点 相互 之 间 都 有 关系 ， 包 括 父 子 关 系 、 同 胞 关系 。 例 如 ， 每 个 节点 都 有 
childNodes 属性 ， 保 存 着 一 个 NodeList 对 象 。NodeList 是 一 种 类 数组 的 对 象 ， 可 以 使 用 
childeNode[0]，childNode.item(1) 来 访问 ， 同 时 拥有 length 属性 ， 但 并 不 是 Array 实例 。 接 下 
来 一 一 进行 讲解 。 
先 看 一 段 DOM 结构 ， 代 码 如 下 : 






































<div i1d="box"> 

第 一 个 div 标签 

<p id="p" tide="P 标签 "> 第 一 个 p 标签 </p> 
<ul> 





<li> 第 一 个 芷 标签 </liy 
<li> 第 二 个 1 标签 </li> 
<li> 第 三 个 1 标签 </1i> 





</ul> 
<p> 
第 二 个 p 标签 
<span> 第 一 个 span 标签 </span> 
</p> 
</div> 


注意 : 接 下 来 的 讲解 都 是 在 这 段 代码 的 基础 上 进行 操作 的 。 


1，childNodes / children 

childNodes: 获取 元 素 的 所 有 子 节点 ， 包 括 按 Enter 键 换行 等 文本 节点 ， 结 果 为 数组 。 
children: 获取 元 素 的 所 有 元 素 节 点 ， 结 果 为 数组 。 

基本 语法 如 下 : 




















<script type=" text/javascript"> 
Var box =document.getElementBylId("box"); 
Var childs = box.childNodes; 
var child = box.children; 


</script> 


控制 台 打印 效果 如 图 14-18 所 示 。 


























图 14-18 ”childNodes 与 children 的 区 别 
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从 图 14-18 可 以 总 结 出 ，childNodes 能 获取 元 素 的 所 有 子 节 点 ， 包 括 按 Enter 键 换行 、 
空格 等 文本 节点 。 而 children 只 能 获取 元 素 的 元 素 节点 ， 即 只 能 取 到 HTML 的 标签 。 在 接 下 
来 的 几 组 方法 中 都 用 到 了 子 节点 、 元 素 节 点 等 概念 ， 就 不 再 一 一 解释 了 。 

2. firstChild /firstElementChild 

firstChild: 获取 元 素 的 第 一 个 子 节点 ， 包 括 按 Enter 键 换行 等 文本 节点 ， 如 果 存 在 子 元 
素 ， 则 返回 第 一 个 子 元 素 ， 否 则 返回 null。 

firstElementChild: 获取 元 素 的 第 一 个 元 素 子 节点 ， 不 包括 按 Enter 键 换行 等 文本 节点 ; 
如 果 没 有 元 素 子 节点 ， 则 返回 null。 
基本 语法 如 下 : 










































































<Script type=" text/javascript"> 
Var box =document.getElementBylId("box"); 
var childs = box.firstChild; 
var child = box.firstElementChild; 

</script> 





执行 上 述 代码 后 ， 打 印 变量 childs 可 以 在 控制 台 打 印 出 的 结果 为 “第 一 个 div 标签 ”， 打 
印 变量 child 可 以 在 控制 台 打 印 出 的 结果 为 “<p id="p"> 第 一 个 p 标签 ip> ”。 

3. lastChild /lastElementChild 

lastChild: 获取 元 素 的 最 后 一 个 子 节点 ， 包 括 按 Enter 键 换行 等 文本 节点 。 

lastElementChild: 获取 元 素 的 最 后 一 个 元 素 子 节点 ， 不 包括 按 Enter 键 换行 等 文本 节点 。 
基本 语法 如 下 : 
















































































<script type=" text/javascript" > 
Var box =document.getElementBylId("box"); 
var childs = box.lastChild; 
var child = box.lastElementChild; 

</script> 











执行 上 述 代 码 后 ， 打 印 变量 childs 可 以 在 控制 台 打 印 出 的 结果 为 “#text” 打印 变量 
child 可 以 在 控制 台 打印 出 的 结果 为 “<p>...</p>”。 

4. parentNode 

parentNode: 获取 当前 节点 的 父 节 点 。 基 本 语法 如 下 : 









































<script type=" text/javascript"> 
Var box =document.getElementBylId("box"); 
Var nodes =box.parentNode; 


</script> 























执行 上 述 代 码 后 ， 打 印 变 量 nodes 可 以 在 控制 台 打 印 出 的 结果 为 “<body>.… </body> ”。 

S. previousSibling / previousElementSibling 

previousSibling: 获取 当前 节点 的 前 一 个 兄弟 节点 ， 包 括 按 Enter 键 换行 等 文本 节点 。 

previousElementSibling: 获取 当前 节点 的 前 一 个 兄弟 节点 ， 不 包括 按 Enter 键 换行 等 文本 
节点 。 
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基本 语法 如 下 : 


<Script type=" text/javascript"> 
Var box =document.getElementBylId("box"); 
Var childs = box.previousSibling; 
var child = box.previousElementSibling; 
</script> 




















执行 上 述 代码 后 ， 打 印 变 量 childs 可 以 在 控制 台 打 印 出 的 结果 为 “#text”， 打印 变量 
child 可 以 在 控制 台 打 印 出 的 结果 为 “null”， 说 明 box 没有 前 一 个 兄弟 节点 。 
6. nextSibling /nextElementSibling 
nextSibling: 获取 当前 节点 的 后 一 个 兄弟 节点 ， 包 括 按 Enter 键 换行 等 文本 节点 。 
nextElementSibling: 获取 当前 节点 的 后 一 个 兄弟 节点 ， 不 包括 按 Enter 键 换行 等 文本 节点 。 
基本 语法 如 下 : 











串 






























































<script type=" text/javascript"> 
Var box =document.getElementBylId("box"); 
Var childs = box.nextSibling; 
var child = box.nextElementSibling; 
</script> 








执行 上 述 代 码 后 ， 打 印 变 量 childs 可 以 在 控制 台 打印 出 的 结果 为 “#text” 打印 变量 


child 可 以 在 控制 台 打 印 出 的 结果 为 “<script type="text/javascript">...</script> ”。 
7. attributes 


attributes: 获取 当前 元 素 节 点 的 所 有 属性 节点 。 基 本 语法 如 下 : 



































<script type=" text/javascript"> 
Vvar p =document.getElementBylId("p"); 
Var attrs = p.attributes; 

</script> 











执行 上 述 代码 后 ， 打 印 变 量 attrs 可 以 在 控制 台 打 印 出 的 结果 为 “NamedNodeMap {0: id， 
1: title, length: 2}” 可 以 发 现 该 标签 具有 id、title 两 个 属性 ， 该 方法 返回 的 是 一 个 数组 。 
1437 0000D0 

在 进行 DOM 操作 时 ， 创 建新 节点 《〈 元 素 ) 是 必 不 可 少 的 步骤 ， 因 为 操作 DOM 的 基础 
就 是 先 获得 标签 节点 。 

1。createElement(" 标 签名 ") 


创建 一 个 新 的 节点 ， 需 要 配合 setAttribute0 方 法 给 新 节点 设置 相关 属 
基本 语法 如 下 : 

























































































性 。 























var img = document.createElement("img"); W 创建 一 个 img 节点 
img.setAttribute("src"," kouhao.png"); // 给 img 节点 设置 属性 值 


疝 



































2.，appendChilqd(" 节 点 名 ") 


appendChild() 方法 可 向 节点 的 子 节点 列表 的 末尾 添加 新 的 子 节 点 ， 即 在 某 元 素 的 最 后 
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追加 一 个 新 节点 。 基 本 语法 如 下 : 





document.bpody.appendChildGimg); V 将 设置 好 的 img 节点 追加 到 body 最 后 























3. insertBefore( 新 节点 名 ,目标 节点 名 ) 

















将 新 节点 插入 到 目标 节点 之 前 。 基 本 语法 如 下 ; 








document.body.insertBefore(img,div1);，// 将 img 节点 插 到 divl 之 前 


下 面 是 一 段 追加 节点 和 播 入 节点 的 代码 示例 。 


HTML 部 分 代码 


ID 下: 


<ulid="ul" class="ul"> 
<]i> 第 一 项 </li> 


A 


<li> 第 二 项 <Mi> 
<li> 第 三 项 </li> 











A 











<]i> 第 四 项 </li> 





</ul> 


<div style="width: 100%; height: 30px; background-color: blue;" 1d="div1"></div><br /> 
<button onclick="appendImg0O"> 在 文档 最 后 插入 一 张 图片 </button> 
<button onclick="inserttmgO"> 在 ul 与 div 之 间 插 入 一 张 图 片 </button> 


JavaScript 部 分 代码 如 下 : 












































function appendImgO{ 
var img = document.createElement("img"); 1 1. 创建 一 个 图 片 节点 
img.setAttribute("srce","logo.png"); /2. 给 img 节点 设置 属性 
document.body.appendChilddims); /3. 将 设置 好 的 img 节点 妃 加 到 body 最 后 


} 





function insertImgO{ 
var img = document.createElement("img"); /1. 创建 一 个 图 片 节点 


img.setAttribute("src"," kouhao.png ); /2. 给 img 节点 设置 属 怕 
var divl = document.getElementBylId("div1"); 








tt 














document.body.insertBefore(img,div1); /3. 在 Ul 与 div 之 间 择 入 图 片 











代码 运行 后 效果 如 


























图 14-19 所 示 。 


人 








在 文 椒 量 后 播 入 一 张 辕 片 在 u 与 div 之 间 揪 入 一 张 图 片 








图 14-19 创建 新 节点 (一) 
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FE 本 - -到 
yD BoM 与 DOM x We 
GC © 127.00.1 女 
。 第 三 项 
。 第 四 项 
17 纺 训令 墩 一 jb 八 才 肪 细 征 双 


在 文档 最 后 插入 一 张 图 片 | 在 u 与 div 之 间 插 入 一 张 图 片 

















图 14-20 创建 新 节点 (二 ) 


4. cloneNode(true/false) 
cloneNode 的 作用 是 复制 节点 ， 需 要 复制 哪个 节点 ， 就 用 哪个 节点 去 调用 被 复 












































在 单 击 两 个 按钮 后 会 在 div 下 方 、ul 列表 与 div 之 间 分 别 插入 两 张 图 片 ， 如 图 14-20 所 示 。 

















传递 参数 为 true 或 false， true 表示 复制 当前 节点 及 所 有 子 节 点 ，false 表示 只 复种 








点 ， 不 复制 子 节 点 (默认 )。 
下 面 是 一 段 复 制 节点 的 代码 示例 。HTML 部 分 代码 如 下 : 

















<ul 1d="ul" class="ul"> 
<] 让 第 一 项 li> 
<li> 第 二 项 </i> 
<li> 第 三 项 < 中 i> 
<]i> 第 四 项 </li> 
</ul> 
<div style="width: 100%; height: 30px; background-color: blue;" i1d="div1"></div> 
<br /> 
<button onclick="copyU10"> 复 制 一 个 ul</button> 




















JavaScript 部 分 代码 如 下 : 


var count = 1; 
function copyU10O{ 
var ul = document.getElementById("ul"); 
var divl = document.getElementById("div1"); 














count++; 
var ulClone = ul.cloneNode(true); 1/ 复制 ul 的 所 有 子 节 点 
ulClone.setAttribute("i1d","ul"+count); // 为 新 复制 的 节点 设置 id 











document.body.insertBefore(ulClone,div1); 1/ 在 div 之 前 ， 插 入 新 复制 节点 





} 
单 击 按钮 后 的 显示 效果 如 图 14-21 所 示 。 
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D goMSDOM 


GC |© 127.0.0.1:8020/HelloV 


。 第 一 项 
。 第 二 项 
。 第 三 项 
。 第 四 项 


。 第 一 项 
。 第 二 项 
。 第 三 项 
。 第 四 项 


复制 一 个 ul 

















图 14-21 复制 节点 效果 








U0 











学 习 了 之 前 的 方法 可 以 发 现 ， 除 了 新 增 节点 ， 有 些 情况 还 需要 使 用 到 删除 节点 或 者 替换 
节点 。 接 下 来 给 大 家 介绍 删除 、 蔡 换 节点 的 方法 。 

1，removeChild( 需 删除 节点 ) 

removeChild0 方法 指定 元 素 的 某 个 指定 的 子 节 点 ， 并 从 父 容器 中 删除 指定 节点 ; 以 
Node 对 象 返回 被 删除 的 节点 ， 如 果 节 点 不 存在 则 返回 nul。 基 本 语法 如 下 : 


document.body.removeChild(uD); // 从 的 父 容器 body 中 删除 节点 


代码 示例 如 下 : 


var list=docu 


























Iment.getElementById( "myList ); 


listremoveChild(list.childNodes[0]); 


实现 的 效果 : 删除 操作 之 前 ，mylist 的 列表 有 Coffee、Tea、Milk 三 项 ， 删 除 操作 之 


刻 




















seas 


mylist 的 列表 项 有 Tea、Milk 两 项 ， 说 明 上 述 例子 已 经 将 mylist 的 第 一 项 删 
2，replaceChild( 新 节点 ,被 替换 节点 ) 
新 节点 替换 指定 节点 。 如 果 新 节点 是 页 面 中 已 有 节点 ， 则 会 将 此 节点 删除 后 ， 替 换 到 








除了 。 





























指定 节点 。 基 本 语法 如 下 : 


document.body.replaceChildmewDiv,oldDiv);，// 使 用 newDiv 蔡 换 掉 oldDiv 


代码 示例 如 下 : 























document.getElementByld("myList").replaceChild newnode,oldnode); 








实现 的 效果 : 月 








日 一 个 新 项 目 替换 列表 中 的 某 个 项 目 ， 蔡 换 操 作 之 前 ， 例 如 mylist 的 列表 








有 Coffee、Tea、Milk 三 项 ， 替 换 操作 之 后 ，mylist 的 列表 项 有 Water、Tea、Milk 三 项 ， 说 


明 上 述 实例 已 经 将 mylist 的 第 一 项 替换 了 。 








下 面 是 一 个 删除 节点 和 蔡 换 节点 综合 示例 。HTML 部 分 代码 如 下 : 
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<ulid="ul" class="ul"> 
<li> 第 一 项 </li> 
<li> 第 二 项 < 省 > 
<li> 第 三 项 </li> 
<li> 第 四 项 </i> 
</ul> 





<div style="width: 100%; height: 30px; background-color: blue;" id="div1"></div> 
<br /> 

<button onclick="delUlO"> 删 除 则 </button> 

<button onclick='"divReplaceUl0"> 新 建 div 替换 ul</button> 


JavaScript 部 分 代码 如 下 : 











function delUlO{ 
/ 取 到 ull 
varul = document.getElementById("ul"); 
if(uD{ 
document.body.removeChild(uD); // 从 也 的 父 容 器 body 中 删除 局 节点 
}else{ 


alert("ul 已 经 被 删除 ! "); 


} 
function divReplaceUl(O{ 
var new_div = document.createElement("div"); 
new_div.setAttribute("style","width: 100%; height: 20px; background-color: yellow; ); 
var ul = document.getElementById("ul"); 
document.body.replaceChild(new_div,ul); 
} 














代码 运行 后 的 效果 仍 与 图 14-21 相同 ， 单 击 “ 删 除 ul” 按 钮 后 ul 列表 被 删除 ， 单 击 
“新 建 div 替换 U” 按 钮 后 效果 如 图 14-22 所 示 。 

















新 建 div 著 换 u 











图 14-22 ”替换 节点 后 的 效果 


14.4 HTML DOM 














HTML DOM 的 特性 和 方法 是 专门 针对 HTML 的 ，HTML 中 每 个 节点 都 是 一 个 对 象 ， 通 
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过 对 象 访问 属性 和 方法 的 方式 ， 让 一 些 DOM 操作 更 加 简便 。 在 HTML DOM 中 有 专门 用 来 
处 理 表格 及 其 元 素 的 属性 和 方法 。 
在 HIML DOM 中 ，Table 对 象 代 表 一 个 HTML 表格 ，TableROW 对 象 代 表 HTML 表格 
的 行 ，TableCell 对 象 代表 HTML 表格 的 单元 格 。 在 HTML 文档 中 可 通过 动态 创建 Table 对 


象 、TableRow 对 象 和 TableCell 对 象 来 创建 HTML 表格 。 




















































































































1441 HTML DOMODOODODODO 


要 使 用 HIML DOM 对 表格 空间 进行 操作 ， 首 先 就 需要 选中 一 个 表格 对 象 。 使 用 
document.getElement 系列 函数 选中 一 个 表格 对 象 ， 就 可 以 用 HTML DOM 操作 这 个 对 象 了 。 

1，rows 属性 

返回 表格 中 的 所 有 行 ， 返 回 的 是 一 个 数组 格式 。 返 回 包含 表格 中 所 有 行 〈TableRow 对 
象 ) 的 一 个 数组 。 基 本 语法 如 下 


table.rows[]; / 返回 表格 的 所 有 行 tr 


开 租 第 


获得 第 一 行 对 象 : table.rows[0] 
































































































































代码 示例 如 下 : 


<body> 
<table 1d="table" style="border: 1px solid black;"> 
<tr style="border: 1px solid black;"> 
<td> 第 1 行 第 1 列 </td> 
<td> 第 1 行 第 2 列 </td> 














</tr> 
<tr> 
<td> 第 2 行 第 1 列 </td> 
<td> 第 2 行 第 2 列 </td> 
</tr> 
<tr> 
<td> 第 3 行 第 1 列 </td> 
<td> 第 3 行 第 2 列 </td> 
</tr> 
<tr> 
<td> 第 4 行 第 1 列 </td> 
<td> 第 4 行 第 2 列 </td> 
</tr> 
</table> 


<script type="text/javascript"> 
var table = document.getElementBylId("table"); 
console.log(table.rows); V/ 打印 表格 的 行 对 象 
</script> 
</body> 


控制 台 打印 效果 如 图 14-23 所 示 。 
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ments Console Sources Networ 


v | Filter 











图 14-23 ”rows 属性 效果 
2. insertRow(index) 方法 
在 表格 的 第 index 行 ， 插 入 一 个 新 行 ，index 表示 插入 的 位 置 ，0 <= index <= 表格 的 行 
数 。 基 本 语法 如 下 : 


table.insertRow(index); /Windex 表示 插入 的 位 置 ，0 <= index <= 表格 的 行 数 
table.insertRow(table.rows.length); / 在 表格 最 后 插入 一 新 行 









































3.deleteRow(index) 方法 
删除 表格 的 第 index 行 ，index 表示 删除 的 位 置 ，0 <= index <= 表格 的 行 数 。 基 本 语法 
如 下 : 





























table.deleteRow(index); /0 <= index <= 表格 的 行 数 
table.deleteRow(table.rows.length-1); /W 删除 表格 最 后 一 行 


1442 HTML DOMOODODDOODO 


通过 上 述 章节 的 学 习 ， 可 以 使 用 表格 对 象 的 rows 属性 获得 当前 表格 的 所 有 行 ， 可 以 通 
过 rows[j] 取 到 表格 的 每 一 行 ， 那 么 每 一 行 的 rows[j] 就 是 行 对 象 。 
1，ecells 属性 
返回 当前 行 中 的 所 有 单元 格 的 一 个 数组 ， 即 返回 包含 行 中 所 有 单元 格 的 一 个 数组 。 基 本 
语法 如 下 : 
table.rows[0].cells; V/ 返回 表格 的 第 一 行 的 所 有 单元 格 
获得 第 一 行 第 一 个 单元 格 对 象 : table.rows[0].cells[0] 


代码 示例 如 下 : 













































































<body> 
<table 1d="table" style="border: 1px solid black;"> 
<tr style="border: 1px solid black;"> 
<td> 第 1 行 第 1 列 </td> 
<td> 第 1 行 第 2 列 </td> 





</tr> 
<tr> 
<td> 第 2 行 第 1 列 </td> 
<td> 第 2 行 第 2 列 </td> 
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</tr> 
<tr> 
<td> 第 3 行 第 1 列 </td> 
<td> 第 3 行 第 2 列 </td> 
</tr> 
<tr> 
<td> 第 4 行 第 1 列 </td> 
<td> 第 4 行 第 2 列 </td> 
</tr> 
</table> 


<script type="text/javascript"> 
var table = document.getElementById("table"); 
console.log(table.rows[0].cells[0]);， // 打印 表格 行 对 象 的 第 一 个 单元 格 
</script> 
</body> 


控制 台 打 印 结果 如 图 14-24 所 示 。 








Performance Memory Application 


top e Default levels Y 


ftd> 第 1 行 第 1 列 </td 81- 操 作 去 格 对 象 .html13 hbt=1512347953994: 34 











图 14-24 行 对 象 的 cells 属性 





2，rowIndex 属性 
返回 当前 行 在 表格 中 的 索引 顺序 ， 索 引 从 0 开始 ， 即 返回 该 行 在 表 中 的 位 置 。 
基本 语法 如 下 : 


table.rows[].rowIndex; V/ 返回 该 行 在 表格 中 的 索引 值 









































3.。insertCell(index) 方法 
在 当前 行 的 第 index 处 插入 一 个 <td>， index 表示 插入 的 位 置 ，0 <= index <= 表格 的 行 
数 。 基 本 语法 如 下 : 


tableRow.insertCell(index);”// index 表示 插入 的 位 置 ，0 <= index <= 表格 的 行 数 
tableRow.insertCell(table.rows.cells.length); V/ 在 行 最 后 插入 一 新 单元 格 











4.deleteCell(index) 方法 
删除 当前 行 的 第 index 个 <td>， index 表示 删除 的 位 置 ，0 <= index <= 表格 的 行 数 。 基 
本 语法 如 下 : 
tableRow.deleteCell(index); /index 表示 删除 的 位 置 ，0 <= index <= 表格 的 行 数 
tableRow.deleteCell(table.rows.cells.length-1); / 删除 该 行 最 后 一 个 单元 格 
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1443 HTML DOMOODOODODOOD 


通过 14.4.2 节 可 知 ， 行 对 象 由 单元 格 组 成 ， 同 样 使 用 行 对 象 的 cells 
行 的 所 有 单元 格 。 而 cells[ 所 取 到 的 每 一 个 单元 格 就 是 单元 格 对 象 。 由 于 需 
所 以 操作 单元 格 就 需要 使 用 table.rows[i].cells[1] 才 能 取 到 。 
1 <cellIndex 属性 
返回 单元 格 在 该 行 的 索引 顺序 ， 从 0 开始 ， 即 返回 该 单元 格 在 某 行 单元 格 集合 中 的 位 
置 。 基 本 语法 如 下 : 





























— 








久 返 回 当 前 

















弄 天 
可 
江 
册 






















































































table.rows[0].cells[0].cellIndex; V 返回 该 单元 格 在 某 行 中 的 索引 值 0 














2.innerHTML 属性 
返回 或 设置 当前 单元 格 中 的 HTML， 即 设置 或 返回 单元 格 的 开始 标签 和 结束 标签 之 间 的 
HTML。 基 本 语法 如 下 : 












































table.rows[].cells[].innerHTML; V/ 返回 该 当前 单元 格 中 的 HTML 





3. align 属性 
设置 或 返回 单元 格 内 部 数据 的 水 平 排列 方式 ， 即 设置 当前 单元 格 的 水 平 对 齐 方式 。 基 本 
语法 如 下 : 
























































table.rows[].cells[].align; V/ 返回 该 行 在 表格 中 的 索引 值 


代码 示例 如 下 : 








var table = document.getElementBylId("table"); 
table.rows[0].cells[0].align = "center"; 
console.log(table.rows[0].cells[0].align); 








例 效果 : 控制 台 打 印 出 的 结果 为 “center”。 
className 属性 
设置 或 返回 元 素 的 class 属性 ， 即 设置 或 获取 单元 格 的 class 名 称 。 基 本 语法 如 下 : 





将 












































table.rows[].cells[].className; // 返回 该 行 在 表格 中 的 索引 值 


代码 示例 如 下 : 





<table border="1" 1d="table"> 
<tr> 
<th class="head">Header</th> 
<th>Header</th> 
<th>Header</th> 
</tr> 
</table> 


console.log(table.rows[0].cells[0].className); 








实现 效果 : 给 表格 的 第 一 行 的 第 一 个 单元 格 设置 一 个 class， 名 字 为 “head”， 执 行 打印 语 
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名 后 ， 在 控制 台 的 打印 结果 为 “head”， 即 该 属性 获取 了 该 单元 格 的 class 名 称 。 




















14.5 章节 案例 : 实现 评论 提交 展示 功能 


在 学 习 了 本 章节 的 内 容 之 后 ， 下 面 来 看 一 个 实现 评论 提交 展示 功能 的 案例 。 最 终 实现 效 
果 如 图 14-25 所 示 。 






































) 评 光 提 交 展 示 


CG jg 127001 


最 新 评论 


本 小 开 


学 习 JavaScript 使 我 快乐 ! 


发 表 评论 





图 14-25 最终 效果 图 














【主要 实现 功能 
> 输入 昵称 和 评论 内 容 ， 单 击 “ 提 交 评论 ”按钮 ， 可 以 将 最 新 的 评论 插入 到 已 有 评论 
的 下 方 。 

> 昵称 和 评论 内 容 为 空 时 ， 不 能 提交 。 
【案例 代码 】 

<!IDOCTYPE html> 

<html> 

<head> 
<style type="text/css"> 
#outside{ 
width: 1000px; 


margin: 0 auto; 

border: 1px solid #E7EAEE:; 
overflow: hidden; 
padding-bottom: 15px; 


} 

#outside h3{ 
width: 95%; 
margin: 13px auto; 
padding-bottom: 10px; 
border-bottom: 1px solid #E7EAEE; 
font-family: "宋体 ",sans-serif; 

} 
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#outside .commentl{ 
width: 95%; 
margin: 10px auto; 
color: #BBBBBB; 
font-size: 12px; 
border-bottom: 1px dashed #E7EAEE; 
font-family: "宋体 ",sans-serif; 


} 

#outside .commentl time{ 
float: right; 

} 


#outside .commentl span{ 
color: #5979B2; 
margin left: Spx; 
font-weight: bold; 

} 

#outside .commentl p{ 
font-size: 16px; 
color: black; 


} 
#outside h4{ 
width: 95%; 
margin: 13px auto; 
color: #404E73; 
font-size: 16px; 
font-weight: bold; 
font-family: "宋体 ",sans-serif; 
} 
#outside #addComment{ 
width: 95%; 
margin: 0 auto; 
font-size: 12px; 
color: #BBBBBB; 
} 
#outside #name{ 
width: 200px; 
border: 1px solid #D9E2EF; 
} 


#outside #comContent{ 
width: 800px; 
height: 100px; 
resize: none; 
border: 1px solid #D9E2EF; 
vertical-align: text-top; 
b 


#outside button{ 
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width: 100px; 

height: 30px; 
backsground-color: #2D46A3; 
color: white; 

border: hidden:; 















































float: right; 
margin: 15px 100px; 
} 
</style> 
</head> 
<body> 
<div id="outside"> 
<h3> 最 新 评论 </h3> 
<div 1d="comment"> 
<div 1d="comment1" class="commentl"> 
杰 瑞 网 友 <span> 杰 小 瑞 </span> 
<time>2017 年 10 月 5 19:21:12</time> 
<p> 学 习 JavaScript 使 我 快乐 ! </p> 
</div> 
</div> 
<h4> 发 表 评 论 </h4> 
<div 1d="addComment"> 
昵 &nbsp;&nbsp;&nbsp;&nbsp; 称 : <inputtype="text" id="name" /><br/><br/> 
评论 内 容 :<textarea id="comContent"></textarea> 
<button onclick="addCommentO"> 提 交 评 论 </button> 
</div> 
</div> 


<script type=" text/javascript" > 

var idNum = 1; 

function addCommentO{ 
idNum++:; 
var inputValue = document.getElementByld("name").value; 
var textValue = document.getElementByld("comContent").value; 
if(inputValue==""||textValue==""){ 

alert(" 昵 称 和 评论 内 容 不 能 为 空 !! "); return; 





} 

Var comContentl = document.getElementByld("comment1"); 

var newComment = comContent] .cloneNode(true); 
newComment.setAttribute("1d","comment"+idNum); 
newComment.getElementsByTagName("span')[0].innerText = inputValue; 
newComment.getElementsByTagName("p")[0].innerText = textValue; 

var commentDiv = document.getElementByld("comment"); 
commentDiv.appendChildnewComment); 
document.getElementByld("name").value = ”; 


document.getElementByld("comContent").value = ""; 
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</script> 
</body> 
</html> 


添加 评论 展示 如 图 14-26 所 示 。 


@ |@ 12700.18020/Helloworld/javascript/ch15 评论 提交 展示 html?.， 女 | : 


最 新 评论 
网 友 杰 小 瑞 
学 习 JavaScript 使 我 快乐 ! 
不 原 透 需 考 名 的 本 现 " 冯 


PHP 是 世界 上 最 好 用 的 语言 ! 


发 表 评论 





图 14-26 添加 评论 展示 





【章节 练习 】 

1. window 对 象 的 属性 主要 包括 、 Screen 、 、 s 、 
history。 

2. window 对 和 象 的 常用 方法 包括 、 alert、 S 、open、 

3. 通过 JavaScript 修改 CSS 有 哪 三 种 方式 ? 

4. 获取 层次 节点 的 常用 属性 有 、firstChild、 、parentNode、 














o 


可 ~» 


5. 复制 节点 方法 中 的 true 和 false 分 别 代表 什么 意思 ? 


【上 机 练习 】 
1. 通过 JavaScript 修改 CSS 实现 选项 卡 切换 功能 。 要 求 使 用 ul 和 div 实现 。 示 例 效果 


如 图 14-27 所 示 。 

















© 1O 127.0.0.1:8020/HelloWorld/JavaScript/ch15 选项 卡 练习 .html? _.… 从 











图 14-27 单元 格 内 数据 的 删除 操作 
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2. 使 用 HTML DOM 操作 表格 单元 格 的 知识 ， 实 现 表 格 单元 格 内 数据 的 修改 以 及 删除 
操作 。 最 终 实 现 效 果 如 图 14-28 所 示 。 

主要 实现 功能 如 下 : 

1) 单 击 “修改 ”， 将 单元 格 变 为 可 编辑 状态 ， 同 时 将 “修改 ”二 字 变 为 “完成 ”。 

2) 单 击 “ 完 成 ”， 结 束 修改 操作 ， 并 将 “完成 ”二 字 变 为 “修改 ”。 

3) 单 击 “ 删 除 ”， 将 本 行内 容 添 加 删除 线 ， 同 时 取消 修改 、 删 除 的 操作 无须 真实 地 删 
除数 据 )。 





Cc | @ 127.0.0.1:8020/1705-HTML5- 笔 记 /04-JavaScript/07-JS 中 的 DOM 操 作 /练习 08- 表 格 .… 廊 | : 





点 击 这 里 导入 书签 。 开始 


用 户 ID ”用 户 姓名 手机 号 码 状态 操作 
zhangsan = 13899999999 修改 删除 


























zhangsan | 李 区 i13866666666 于 修改 删除 














zhangsan E> 13888888888 修改 删除 

















图 14-28 ”最终 实现 效果 
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性 















































事件 是 由 访问 Web 页 面 的 用 户 引 起 的 一 系列 操作 ， 比 如 用 户 敲 击 键盘 或 按 下 鼠标 按键 
时 ， 或 者 鼠标 移 到 某 个 位 置 时 ， 都 会 产生 事件 。 本 章 学 习 JavaScript 事件 。 

本 章 学 习 目 标 : 

> 了 解 JavaScript 的 三 种 事件 类 型 。 

> 掌握 JavaScript 的 两 种 事件 模型 。 

> 掌握 JavaScript 的 事件 流 模型 。 

事件 通常 与 函数 结合 使 用 ， 函 数 不 会 在 事件 发 生前 被 执行 。 学 习 本 章节 之 后 ， 读 者 可 以 
在 事件 的 基础 上 辅助 实现 功能 


















































是 
























































15.1 JavaScript 的 事件 


在 JavaScript 中 ， 事 件 是 一 个 非常 重要 的 概念 。 由 于 JavaScript 是 一 门 基于 事件 的 语 
言 ， 所 以 JavaScript 中 的 很 多 操作 都 离 不 开 事件 的 文 持 。 比 如 之 前 提 到 的 onclick 就 是 一 种 鼠 
标 事件 ， 而 JavaScript 中 的 事件 共 分 为 鼠标 事件 、 键 盘 事 件 、HITML 事件 三 大 类 。 


1511 D000 


鼠标 事件 ， 顾 名 思 义 就 是 需要 通过 鼠标 进行 触发 的 事件 。 这 是 在 JavaScript 中 最 常用 的 
一 种 事件 类 型 ， 也 是 使 用 起 来 最 简单 的 一 种 事件 类 型 。 常 用 的 鼠标 事件 见 表 15-1。 





























































































































表 15-1 常用 的 鼠标 事件 






























































事 件 发 生 时 间 
onclick 户 单 击 对 象 时 
ondblclick 户 双击 对 象 时 
onmouseover 鼠标 移 到 某 个 元 素 之 上 时 
onmouseout 鼠标 移出 某 个 元 素 时 
onmousemove 鼠标 被 移动 
onmousedown 鼠标 按键 被 按 下 
onmouseup 鼠标 按键 被 松 开 








是 









































到 


事件 的 使 用 通常 是 需要 配合 函数 的 调用 ， 可 以 给 标签 添加 
时 候 调用 一 个 函数 。 代 码 示例 如 下 : 


中 


件 属 性 ， 当 标签 触发 事件 的 











全 


























<button onclick="funcO"> 单 击 我 触发 事件 </button> 
<script type=" text/javascript"> 
function funcO{ 
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alert(" 触 发 按钮 的 onclick 事件 "); 


} 
</script> 
个 标签 节点 ， 通 过 JavaScript 动态 绑 定 一 个 匿名 函 




















除了 这 种 方式 外 ， 还 可 以 通过 选中 
数 触发 事件 。 代 码 示 例如 下 : 
<button id="btn"> 单 击 我 触发 事件 </button> 


<script type=" text/javascript"> 
Var btn = document.getElementById("btn"); 














btn.onclick = functionO{ 


alert(" 触 发 按钮 的 onclick 事件 "); 





} 


</script> 


F 细 讲解 。 














关于 事件 的 绑 定 方式 将 在 本 章 15.2 认 
定 ”按钮 会 弹出 提示 框 。 


























上 述 代 码 是 两 种 常用 的 绑 定 事件 方式 。 












































代码 运行 之 后 的 结果 如 图 15-1 所 示 ， 单 击 “ 确 
SB- °°- 
0.1:8020/ 孝 村 /16 x 
GC ©12700.1 从 | 
单 击 我 触发 事件 127.0.0.1:8020 显示 : | 
| 


艇 发 榨 径 的 onclick 事 件 


a 
名 

















图 15-1 触发 按钮 的 onclick 鼠标 事 





1512 D000 
键盘 事件 是 指 通过 按 下 键盘 按键 所 触发 的 事件 。 按 下 一 个 按键 并 抬 起 的 过 程 ， 实 际 上 可 
以 分 为 三 个 阶段 ， 每 个 阶段 的 触发 时 间 见 表 15-2。 


表 15-2 键盘 事件 






































事件 发 生 时 间 
onkeydown 键盘 按 下 去 触发 
onkeypress 键盘 按 下 并 松 开 的 瞬间 触发 
onkeyup 键盘 抬 起 时 触发 
事项 。 

















过 程 中 有 很 多 的 注意 











Mop 


鼠标 事件 的 类 型 繁多 ， 但 是 在 使 





























键盘 事件 没有 
1. 键盘 事件 注意 事项 
(1) 三 个 事件 的 执行 顺序 
键盘 事件 一 共有 三 种 类 型 。 这 三 种 类 型 是 按 顺 序 执行 的 ， 依 次 是 onkeydown、 
onkeypress、onkeyup。 
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件 


oy 


(2) 长 按时 触发 的 


Wil 











当 长 按 一 个 按键 时 ， 会 不 断 触 发 onkeydown 和 onkeypress， 只 有 按键 抬 起 以 后 才 会 触发 





onkeyup 事件 。 
(3) onkeydown/onkeyup 和 onkeypress 的 区 别 


























1) onkeypress 只 能 捕获 字母 、 数 字 、 符 号 键 ， 不 能 捕获 功能 键 〈 如 Enter 键 、F1 一 Fl12 




























































































键 等 )，onkeydown/onkeyup 基本 可 以 捕获 所 有 功能 键 ( 特 殊 键盘 的 某 些 按键 除外 )。 


2) 捕获 字母 键 时 ，onkeypress 可 以 区 分 大 小 写 ，onkeydown 和 onkeyup 不 区 分 大 小 写 。 






































3) 捕获 数组 键 时 ，onkeydown/onkeyup 可 以 区 分 主键 盘 和 小 键盘 
区 分 。 

(4) 通常 将 键盘 事件 声明 在 document 上 
在 使 用 键盘 事件 时 ， 通 常会 直接 将 键盘 事件 监测 到 document 上 ， 
onkeyup 通常 监测 一 个 即 可 。 代 码 示例 如 下 : 
















































































document.onkeydown = functionO{ 
/ 键盘 按键 按 下 时 触发 的 函数 


2. 判断 键盘 按键 


HI 





用 户 按 下 去 的 是 哪 一 个 按键 。 


-二 











当 监 测 键盘 事件 时 ， 浏 览 费 会 默认 将 事件 因子 。 传 入 事件 触发 函数 中 ， 事 件 因 子 可 以 通 
过 keyCode 等 属性 确认 按键 ASCII 码 值 ， 进 而 确定 用 户 按 下 的 是 哪 一 个 按键 。 





ey 

































































注意 : 关于 事件 因子 的 详细 内 容 将 在 15.1.4 节 中 讲述 。 











在 使 用 键盘 事件 时 ， 除 了 需要 检测 触发 的 是 onkeydown 还 是 onkeyup， 更 重要 的 是 判断 


，Onkeypresg 不 能 够 





而 且 onkeydown 和 






































判断 浏览 器 按键 的 第 一 步 是 取 到 事件 因子 ， 绝 大 部 分 浏览 器 可 以 将 事件 因子 通过 触发 函 
数 传 入 ， 但 是 部 分 浏览 器 需要 通过 window.event 手动 取 到 。 上 所 以 ， 通 常 使 用 如 下 代码 兼容 所 



































有 浏览 器 。 






































document.onkeydown = function(e){ V/ 触发 事件 时 ， 会 将 事件 因子 通过 事件 触发 函数 传 入 





























/ 用 两 种 方法 兼容 所 有 浏览 器 取 到 事件 因子 


var evn = el|lwindow.event; 











} 














取 到 事件 因子 后 ， 可 以 通过 事件 因子 取 到 用 户 按 键 的 ASCI 码 值 。 最 常用 的 方式 是 



















































































evn.keyCode， 但 是 为 了 兼容 所 有 浏览 器 ， 通 常 采用 如 下 写法 。 





























/ 使 用 兼容 方式 取 到 按键 ASCII 编码 


var code = evn.keyCodellevn.whichllevn.charCode; 


























整合 所 有 步骤 ， 以 Enter 键 为 例 ， 可 以 判断 用 户 按键 是 否 为 Enter 键 。 





代码 示例 如 下 : 


document.onkeydown = function(e){ 


var evn = el|lwindow.event; 
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var code = evn.keyCodellevn.whichllevn.charCode; 


if(code==13){ 
alert(“ 您 按 下 了 Enter 键 ”); // 用 户 按 下 Enter 键 后 需要 执行 的 操作 


} 
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上 述 代码 中 ，Enter 键 的 ASCII 码 值 为 13。 除 此 之 外 ， 常 用 的 ASCII 码 值 见 表 15-3。 


表 15-3 罗列 了 开发 过 程 中 常用 





























的 按键 ， 实 际 还 有 4 









































民 多 ASCII 码 ， 可 以 参照 帮助 文档 学 习 。 


表 15-3 常用 的 ASCII 码 值 参照 表 


























ASCI 码 值 按键 或 含义 
0 空 字符 (Null) 

13 Enter 键 
27 Esc 键 
32 空格 键 

48~57 数字 键 0~9 

65~90 大 写字 母 A~Z 

97~122 小 写字 母 a~z 
127 Delete 键 





15.13 HTMLODDO 
15.1.1 节 和 15.1.2 节 讲 解 的 鼠标 事件 和 键盘 事件 是 需要 用 户 通过 鼠标 或 键盘 才能 触发 的 




















事件 。 在 JavaScript : 





还 有 一 类 非 








发 生变 化 的 时 候 自动 



























































中 


常 重要 的 事件 一 一 HTML 事件 ， 表 示 网 页 中 的 HTML 标签 














触发 的 事件 。 














最 常用 的 是 window.onload 事件 ， 表 示 文 档 加 载 成 功 以 后 




















pn 


再 执行 JavaScript 代码 。 常 见 的 HTML 事件 见 表 15-4。 


表 15-4 常见 的 HTML 事件 

















































































































事 件 发 生 时 间 
onload 文档 或 图 像 加载 后 
onunload 文档 卸载 后 ， 即 退出 页 面 时 
onblur 元 素 失去 焦点 
onselect 文本 被 选中 
oninput 元 素 在 用 户 输入 时 触发 
onchange 内 容 被 改变 
onfocus 元 素 获 得 焦点 时 
onsubmit 表单 提交 时 
onreset 重 置 按钮 被 单 击 
onresize 窗口 被 重新 调整 大 小 时 
onscroll 当 文 档 被 滚动 时 发 生 的 事件 
ondrag 当 元 素 正 在 拖 动 时 触发 的 事件 
ondragstart 当 元 素 开始 被 拖 动 的 时 候 触 发 的 事件 
ondragover 元 素 被 拖 动 到 指定 区 域 的 时 候 触发 的 事件 
ondrop 当 放 置 被 拖 动 元 素 时 触发 的 事件 
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业 





业 


W 








了 解 了 常用 的 HTML 事件 ， 以 表格 中 提 到 的 oninput 
微 博 时 动态 提示 文本 框 剩余 字数 的 控件 。 
效果 图 如 图 15-2 所 示 。 


事件 为 例 ， 做 一 个 简单 的 类 似 发 寻 








六 Javascript 事 件 


CG |© 127.0.0.1:802 





杰 瑞 教育 ， 专 注 教育 培训 、IT 人 才 
选拔 推荐 业务 ， 中 国 高 端 互联 网 培 
训 领 导 品 























已 输 和 36 个 字 ， 还 可 以 输入 104 个 字 








图 15-2 输入 框 剩余 字 数 提示 








【功能 描述 】 

> 输入 框 中 输入 内 容 ， 下 方 提示 文字 可 以 动态 显示 输入 数据 。 

> 输入 框 最 多 输入 140 个 字 ， 超 出 字数 限制 给 予 提示 。 

首先 创建 一 个 用 于 输入 的 文本 域 ， 文 本 域 下 面 加 上 字数 提示 信息 ， 其 中 剩余 字数 用 两 个 
span 标签 包 时 起 来 ， 以 便 实时 修改 。 代 码 如 下 : 






























































<div> 
<textarea oninput="checkText()" style="height: 100px;width: 200px;” 1d="textContent" 
name="content" style="overflow-y: scroll"> 
</textarea> 
</div> 
<div> 
已 输入 <span style="font-family: Georgia; font-size: 26px;" id="write">0</span> 个 字 ， 
还 可 以 输入 <span style="font-family: Georgia; font-size: 26px;" id="leftText">140</span> 个 字 
</div> 


通过 JavaScript 来 获取 已 输入 的 字数 并 且 计 算 剩 余 的 字数 。 代 码 如 下 : 











var textContent = document.getElementByld("textContent"); 
var leftText = document.getElementByld("leftText"); 
Var write = document.getElementById("write ); 
function checkTextO{ 
var max = 140; 
if (textContent.value.length > max) { 
textContent.value = textContent.value.substring(0,max); 
leftText.innerText = 0; 
alert(" 不 能 超过 "+max+" 个 字 !"); 
} else{ 
write.innerText = textContent.value.length 


leftText.innerText = max-textContent.value.length; 
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1514 event000D 


取 到 事件 因 




















子 有 两 种 方式 ， 除 了 键盘 事件 ， 还 可 以 在 任何 事件 的 触发 函数 中 使 用 











window.event 取 到 事件 因子 对 象 。 
代码 示例 如 下 : 


<button id="btn"> 单 击 我 查看 事 人 


~ 


T 
到 








因子 </button> 








<Script type=" text/javascript"> 


var btn = document.getElementById("btn'"); 
btn.onclick = function(e){ 


} 


</script> 





如 上 述 代码 所 示 ， 给 按钮 添加 的 是 onclick 鼠标 事件 ， 但 依然 可 以 在 鼠标 事件 的 函数 中 


var evn =e || window.event; 


console.log(evn); 














只 


| 











除了 已 经 讲 到 的 keyCode 属 怕 














看 事件 因子 ， 如 图 15-3 所 示 。 











事件 中 的 事件 因子 














图 15-3 ”鼠标 单 


名 H 
LI 
hl 



































TT 
送 
th 
二 
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Cm 
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Ee 
上 
本 
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oy 
[q") 
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C 
号 
过 
深 
el 
计 
一 SN 
项 
Ry 
十 
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生 。event 对 





象 常 用 的 属性 见 表 15-5。 














表 15-5 event 对 象 常用 的 属性 












































































































































属 性 名 说 ” 明 
keyCode 检测 键盘 事件 相对 应 的 Unicode 字符 码 
srcElement 返回 触发 事件 的 元 素 
type 返回 当前 event 对 象 表示 的 事件 名 称 
button 检查 按 下 的 鼠标 键 
X,y 返回 鼠标 相对 于 css 属性 中 有 position 属性 的 上 级 元 素 的 x 和 y 坐标 
clientX,clientY 返回 鼠标 在 浏览 器 窗口 区 域 中 的 x 和 y 坐标 
ScreenX,ScreenY 返回 鼠标 相对 于 用 户 屏幕 中 的 x 和 y 坐标 
altKey 检查 Alt 键 的 状态 。 当 Alt 键 按 下 时 ， 值 为 Tue; 否则 为 False 
ctrlKey 检查 Ctrl 键 的 状态 。 当 Ctrl 键 按 下 时 ， 值 为 True， 和 否则 为 False 
shiftKey 检查 Shift 键 的 状态 。 当 Shift 键 按 下 时 ， 值 为 True; 和 否则 为 False 
toElement 检测 onmouseover 和 onmouseout 事件 发 生 时 ， 鼠 标 所 进入 的 元 素 
fromElement 检测 onmouseover 和 onmouseout 事件 发 生 时 ， 鼠 标 所 离开 的 元 素 
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注意 : 检测 和 鼠标 按键 的 button 属性 仅 用 于 onmousedown、onmouseup 和 onmousemove 
事件 。 对 于 其 他 事件 ， 不 管 鼠 标 状态 如 何 ， 都 返回 0 (比如 onclick )。 它 有 8 个 属性 值 ， 分 
别 是 0 没 按 键 、1 按 左 键 、2 按 右 键 、3 按 左 右键 、4 按 中 间 键 、5 按 左 键 和 中 间 键 、6 按 
右键 和 中 间 键 、7 按 所 有 的 键 .。 


15.2 Javascript 的 事件 模型 


在 JavaScript 中 ， 事 件 的 绑 定 方式 被 称 为 “事件 模型 >”。 之 前 小 节 讲 述 的 两 种 绑 定 事件 方 
式 都 属于 DOMO0 事件 模型 ， 除 此 之 外 还 有 一 种 被 称 为 DOM2 事件 模型 的 绑 定 方式 。 


1521 DOMOD DOOD 


DOM0 事件 模型 是 最 早 诞生 的 事件 模型 ， 也 是 最 常用 的 事件 绑 定 方式 。DOMO0 模型 有 两 
种 绑 定 事件 的 方式 ， 分 别 是 内 联 模型 和 脚本 模型 。 
1. 内 联 模 型 
内 联 模 型 又 称 为 “行内 绑 定 ” 其 绑 定 事件 的 方式 是 直接 将 函数 名 作为 HTML 标签 某 个 
事件 的 属性 值 。 基 本 语法 如 下 : 


<button onclick="funcO"> 按 钮 </button> 



















































































缺点 ， 违反 W3C 关于 HTML 与 JavaScript 分 离 的 基本 原则 。 

2. 脚本 模型 

脚本 模型 又 称 为 “动态 绑 定 ”， 其 绑 定 的 方式 是 通过 在 JavaScript 中 选中 一 个 节点 ， 并 给 
节点 的 onlick 事件 添加 监听 函数 。 基 本 语法 如 下 : 


/ 给 window 对 象 添加 onload 事件 
window.onload = function(O{} 





















































~ 





/ 选中 div 节点 ， 并 添加 onlick 事件 
document.getElementBylId("div").onlick = functionO{} 




















优点 : 实现 了 HTML 与 JavaScript 分 离 ， 符 合 W3C 的 基本 原则 。 
缺点 : 
1) 同一 节点 上 只 能 绑 定 一 个 同类 型 事件 ， 如 果 绑 定 多 次 ， 则 只 有 最 后 一 次 生效 。 
2) 一 旦 绑 定 事件 ， 无 法 取消 事件 绑 定 。 


15.22 DOM2000D0 


DOMO 绑 定 事件 的 两 种 方式 都 有 其 局 限 性 。 为 了 解决 DOM0 
性 ，DOM2 事件 模型 应 运 而 生 。 
1. 添加 事件 绑 定 
DOM2 事件 模型 的 绑 定 相对 于 DOMO 要 稍微 复杂 一 些 ， 并 且 针 对 浏览 器 版 本 的 不 同 ， 
有 两 种 不 同 的 绑 定 方式 。 



















































































是 





事件 模型 所 存在 的 局 限 
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1) 针对 正 8 之 前 的 浏览 器 ， 使 用 attachEventO 进 行事 件 绑 定 。 基 本 语法 如 下 





var btn = document.getElementById("btn ); 
btn.attachEvent("onclick",functionO{ 
// oncick 触发 时 执行 的 回调 函数 





); 


其 中 ，attachEvent 接收 两 个 参数 。 

Q 第 一 个 参数 是 触发 的 事件 类 型 ， 主 要 事件 名 称 需要 用 “on” 开 头 。 

@) 第 二 个 参数 是 发 事件 时 执行 的 回 调 函 数 。 

2) 除 正 8 之 外 的 其 他 浏览 器 ， 统 一 使 用 W3C 规范 ， 使 用 addEventListenerO 进 行事 件 绑 
定 。 基 本 语法 如 下 : 
































髓 



















































































var btn = document.getElementById("btn"); 
btn.addEventListener("click",function(O{ 

/click 触发 是 执行 的 回调 函数 
},true/false); 





其 中 ，addEventListener 接收 3 个 参数 。 

CD 入 第 一 个 参数 是 触发 的 事 牛 类 型 ， 主 要 事件 名 称 不 需要 用 “on” 开 头 。 

@ 第 es 函数 。 

@) 第 参数 是 模型 参数 ， 表 示 事 件 冒 泡 或 事件 捕获 ，false〈 默 认 ) 表示 事件 冒 泡 ， 
true 二 二 和 获 。 


注意 : 关于 事件 冒 泡 和 事件 捕获 将 在 15.3 节 进 行 详细 讲解 。 
3) 为 了 能 够 兼容 各 种 浏览 器 ， 可 以 采用 兼容 写法 进行 操作 。 基 本 语法 如 下 






































































































































Var btn = document.getElementById("btn ); 

if(btn.attachEvent){ 
/ 判断 浏览 器 如 果 支 持 attachEvent， 就 用 attachEvent 进行 绑 定 
btn.attachEventO; 

}else{ 
// 如 果 浏 览 器 不 文 持 attachEvent， 就 用 addEventListener 进行 绑 定 
btn.addEventListener(); 



































} 


2. 取消 事件 绑 定 

DOM2 和 DOMO 相 比 有 一 个 非常 重要 的 区 别 ， 就 是 使 用 DOM2 绑 定 的 事件 可 以 取消 寻 
件 绑 定 。 如 果 要 取消 事件 绑 定 ， 那 么 在 绑 定 事件 时 ， 回 调 函 数 必须 使 用 有 名 函数 ， 而 不 能 使 
匿名 函数 。 基 本 语法 如 下 : 











pn 






































— 


Var btn = document.getElementById("btn'"); 
/IE8 之 前 


btn.attachEvent("onlick",clickFunction); 
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/ 其 他 浏览 
btn.addEventListener("click",clickFunction,true); 


function clickFunctionO{ 


/ 单 击 事件 的 回调 函数 











} 




















为 什么 绑 定 的 时 候 不 能 使 用 匿名 函数 作为 回调 函数 呢 ? 主要 原因 在 于 取消 事件 绑 定 的 时 
候 ， 语 法 要 求 必 须 传 入 需要 取消 的 函数 名 。 而 匿名 函数 没有 函数 名 ， 故 无 法 取消 。 针 对 不 同 
浏览 器 ， 取 消 事件 绑 定 也 有 两 种 不 同方 式 。 

1) 针对 IE8 之 前 使 用 attachEvent0 绑 定 的 事件 ， 可 以 使 用 detachEventO 取 消 事件 绑 定 。 
基本 语法 如 下 : 































































































btn.detachEvent("onclick" ,函数 名 ); 





2) 针对 其 他 浏览 器 使 用 addEventListener0O 绑 定 的 事件 ， 可 以 使 用 removeEventListener() 
取消 事件 绑 定 。 基 本 语法 如 下 : 








.TemoveEventListener("click" ,函数 名 ); 


3. DOM2 事件 模型 的 优点 

相 比 于 DOMO 事件 模型 ， DOM2 的 优点 主要 有 以 下 几 条 :; 

1) 实现 了 HTML 与 JavaScript 的 分 离 ， 符 合 W3C 关于 内 容 与 行为 分 离 的 要 求 。 

2) 使 用 DOM2 绑 定 的 事件 ， 可 以 取消 事件 绑 定 。 

3) 使 用 DOM2 可 以 为 同一 节点 添加 多 个 同类 型 事件 ， 多 个 事件 可 以 同时 生效 ， 而 不 会 
被 覆盖 掉 。 







































































15.3 ” ”JavaScript 的 事件 流 模型 


15.2 节 使 读者 了 解 到 JavaScript 中 的 事件 模型 ， 而 在 JavaScript 中 还 有 一 种 模型 一 一 习 
件 流 模型 。 所 谓 的 事件 流 ， 就 是 当 一 个 节点 触发 事件 时 ， 事 件 会 从 当前 节点 流向 其 他 节点 ， 
而 根据 事件 流动 的 方向 ， 事 件 流 模型 可 以 分 为 事件 冒 泡 和 事件 捕获 。 基 于 事件 冒 泡 ， 又 诞生 
了 一 种 新 的 事件 绑 定 方式 一 一 事件 委派 。 

15.31 中] 

事件 流 指 页 面 接收 事件 的 顺序 ， 当 一 个 事件 产生 时 ， 该 事件 传播 的 过 程 就 是 事件 流 。 首 
先 介 绍 事件 流 模型 中 的 第 一 种 类 型 一 一 事件 冒 泡 。 

1. 事件 冒 泡 的 概念 
当 某 DOM 元 素 触 发 某 事件 时 ， 会 从 当前 DOM 元 素 开始 ， 逐 个 触发 其 祖先 元 素 的 同类 
型 事件 ， 直 到 DOM 根 节 点 。 事 件 冒 泡 示 意图 如 图 15-4 所 示 。 
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图 15-4 事件 冒 泡 示意 图 














2. 触发 事件 冒 泡 的 情况 
在 人 们 接触 到 的 事件 绑 定 方式 中 ， 绝 大 部 分 都 是 事件 冒 泡 。 详 细 可 以 分 为 如 下 几 种 
情况 。 

1) DOMO 事件 模型 绑 定 的 事件 均 为 事件 冒 泡 。 

2) IE8 之 前 使 用 attacnEventO 添 加 的 事件 均 为 事件 冒 泡 。 

3) 对 于 其 他 浏览 器 使 用 addEventListener0O 添 加 的 事件 ， 当 第 三 个 参数 为 false 或 省 略 
时 ， 为 事件 冒 泡 。 

3. 事件 冒 泡 举例 

了 解 了 事件 冒 泡 的 概念 ， 继 续 来 看 一 段 代码 示例 : 


<IDOCTYPE html> 
















































































<html> 
<head> 
<meta charset="UTF-8"> 
<title> </title> 
<style type="text/css"> 
#div1{ 
width:150px; 
height: 150px; 
background-color: blue; 
} 
#div2{ 
width:100px; 
height: 100px; 
background-color: red; 
} 
#div3{ 
width:S5O0px; 
height: SOpx; 
background-color: yellow; 
} 
</style> 
</head> 
<body> 
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<div id="div1"> 
<div id="div2"> 
<div id="div3"></div> 
</div> 
</div> 
</body> 
<Script type= "texUjavascript "> 
document.getElementByld("div1").onclick = function(O{ 
console.log(" 触 发 divl 单 击 事件 ") 











} 
document.getElementByld("div2").onclick = functionO{ 


console.log(" 触 发 div2 单 击 事件 ") 
} 
document.getElementByld("div3").onclick = functionO{ 
"触发 div3 单 击 事件 ") 

















console.log( 


} 
</script> 
</html> 


上 述 三 个 div 是 相互 柚 套 的 关系 ， 并 且 痢 添加 了 onclick 事件 ， 当 单 击 最 内 层 的 div3 
时 ， 可 以 发 现 三 个 div 的 onclick 事件 都 被 触发 ， 并 且 触 发 顺序 是 从 当前 元 素 div3 开始 ， 依 
次 向 祖先 元 素 触 发 ， 如 图 15-5 所 示 。 
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图 15-5 单 击 div3 触发 的 onclick 事件 (事件 冒 泡 ) 




















15.32 DO0OO 
捕获 与 事件 冒 泡 类 似 ， 只 是 在 事件 流 的 方向 上 与 事件 冒 泡 恰 恰 相反 。 


事件 捕获 的 概念 
当 某 DOM 元 素 触发 某 事 件 时 ， 会 从 根 节 点 开始 ， 逐 个 触发 其 祖先 元 素 的 同类 型 事件 ， 
直到 当前 节点 。 事 件 捕获 示意 图 如 图 15-6 所 示 。 
2. 触发 事件 捕获 的 情况 
相 比 于 事件 冒 泡 ， 事 件 捕获 只 有 一 种 方式 能 够 触发 ， 即 正 8 之 外 的 其 他 浏览 器 使 用 
addEventListenerO 添 加 的 事件 ， 当 第 三 个 参数 为 true 时 ， 为 事件 捕获 。 
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口 
到 Element html 

Element body 
事件 捕获 




















图 15-6 事件 捕获 示意 图 

















3. 事件 捕获 举例 
了 解 了 事件 捕获 的 概念 后 ， 继 续 来 看 一 段 代码 示例 : 


<IDOCTYPE html> 



































<html> 
<head> 
<meta charset="UTF-8"> 
<title> </title> 
<style type="text/css"> 
#div1{ 
width:150px; 
height: 150px; 
background-color: blue; 
} 
#div2{ 
width: 100px; 
height: 100px; 
background-color: red; 
} 
#div3{ 
width:S5O0px; 
height: SOpx; 
background-color: yellow; 
} 
</style> 
</head> 
<body> 
<div id="div1"> 
<div id="div2"> 
<div 1d="div3"></div> 
</div> 
</div> 
</body> 


<script type="text/javascript"> 
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document.getElementByld("div1").addEventListener("click",function(){ 











console.log(" 触 发 divl 单 击 事件 "); 
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addEventListener("click",function(){ 
事件 "); 
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},true); 
document.getElementById("div2"). 

console.log(" 触 发 div2 单 击 


},true); 
document.getElementByld("div3"). 
console.log(" 触 发 div3 单 击 寻 
},true); 
</script> 
</html> 





上 述 三 个 div 为 相互 柑 套 的 关系 ， 使 用 addEventListener() 添 加 click 


addEventListener("click",function(){ 
BM: 








车 








是 





有 件 





事件 并 设 为 如 














获 ， 当 单 击 最 内 层 的 div3 时 ， 可 以 发 现 三 个 div 的 onclick 事件 都 被 触发 ， 并 且 触 发 顺序 是 






























































































































































































































































从 祖先 元 素 divl 开始 ， 依 次 触发 到 当前 元 素 div3， 如 图 15-7 所 示 。 
eT 9 -° En 
EF G © 127.00.1 pa 从 
K QO Elements Console Sources Ne » xX 
OS | v Defa Is Y 人 水 
div1 htm hbt=15123892 
div2 刁 htm hbt=1512388 
<div3 htr hbt=1512 
图 15-7 单 击 div3 触发 的 onclick 事件 《事件 捕获 ) 
15.3.3 0UDODOD 
基于 事件 冒 泡 诞生 了 一 种 新 的 事件 绑 定 方式 一 一 事件 委派 。 
1. 事件 委派 的 概念 
事件 委派 也 叫 事 件 委托 ， 是 将 本 该 添加 在 节点 自身 的 事件 ， 选 择 添加 到 其 父 节 点 上 ， 同 
时 委派 给 当前 元 素来 执行 。 
2. 事件 委派 的 原理 
事件 委派 的 原理 就 是 事件 冒 泡 。 由 于 给 多 个 子 元 素 添加 事件 ， 会 沿 着 事件 冒 泡 流 触发 
父 元 素 的 同类 型 事件 ， 所 以 可 以 直接 将 事件 添加 在 父 元 素 上 ， 并 在 事件 函数 中 判断 单 击 的 是 
哪 一 个 子 元 素 ， 进 而 进行 具体 操作 。 
3. 原生 JavaScript 实现 事件 委派 
在 开发 过 程 中 ， 事 件 委派 的 实现 通常 使 用 JQuery 框架 进行 ， 由 于 现在 没有 学 习 
JQuery， 所 以 选择 使 用 原生 JavaScript 来 实现 事件 委派 功能 
代码 示例 如 下 : 
<!IDOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-8"> 
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<title></title> 
</head> 
<body> 
<ul id="ul"> 
<l> 杰 瑞 教 育 </li> 
<li>Web 前 端 培训 </li> 
<li>JavaEE 培训 </li> 
<li>PHP 培训 </li> 
</ul> 
</body> 
<script type="text/javascript"> 





var ul = document.getElementById("ul"); 
/ 将 本 该 添加 在 二 的 事件 ， 添 加 在 其 父 节 点 上 
ul.onclick = function(e){ 

/ 取 到 事件 因子 

Var evn =e || window.event; 

/ 取 到 当前 单 击 的 是 哪 一 个 标签 

Var target = event.target || event.srcElement; 

/ 判断 单 击 的 标签 是 不 是 标签 

if(target.nodeName.toLowerCase() === 1){ 
/ 使 用 target 代 指 当前 被 单 击 的 节点 


console.log(target.inner Text); 





















































} 


</script> 
</html> 


从 上 述 代码 可 以 看 到 ， 将 本 该 添加 在 上 上面 的 单 击 事件 ， 添 加 在 的 父 节点 由 上， 并 
在 事件 函数 中 取 到 事件 因子 ， 进 而 通过 事件 因子 取 到 当前 单 击 的 元 素 。 如 果 单 击 的 元 素 是 
li， 则 触发 操作 。 
当 单 击 每 个 站 时 ， 运 行 效果 如 图 15-8 所 示 。 

































































DD 127.0.0.1:8020/ 教 材 15 x 邮 \ 
GG | @ 127.0.0.1:8020/ 教 材 /16/04- 事 件 委派 .html?_hbt=1512381529687 





杰 瑞 教育 L Elements Console Sources ” Network » ; Xx 


Web 前 端 培 训 
JavaEE 培 训 
PHP 培 训 杰 瑞 教育 -事件 委派 .html?__hbt=1512381529687:29 


Filter Defaultlevels Y 将 








Web 前 端 培训 -事件 委派 .htm1? hbt=1512381529687:29 











JavaEE 培 训 -事件 委派 .html?__hbt=1512381529687:29 




















图 15-8 ”使 用 事件 委派 绑 定 事件 效果 





4. 事件 委派 的 作用 
事件 委派 有 很 大 用 处 ， 主 要 体现 在 如 下 两 点 : 
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Web 前 


(1) 提高 性 和 
将 事件 绑 定 在 父 节 ， 


[全 已 


已 














要 绑 定 多 个 事件 。 
(2) 新 添加 的 元 素 会 具有 同类 型 元 素 的 事件 
如 果 使 用 其 他 方式 绑 定 事件 ， 当 页 面 新 增 同类 的 节点 时 ， 这 些 证 








因 | 








此 ， 事 件 委 派 
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15.34 0UDOODODO 
事件 委派 的 原理 就 是 事件 
中 ， 大 多 情况 并 不 想 让 子 元 素 的 事件 影 








对 于 阻止 事件 冒 
以 前 的 浏览 器 ， 
e.stopPropagation() 方 法 。 当 














冒 泡 ， 但 并 不 是 所 有 











点 上 ， 只 需要 绑 定 一 个 事件 就 可 以 ; 而 将 事件 依次 添加 给 子 节点 ， 则 
有 更 优 的 性 能 。 
点 不 会 获得 之 前 绑 定 的 





事件 。 但 是 ， 使 用 事件 委派 可 以 让 新 添加 的 元 素 获得 之 前 绑 定 的 事件 。 























下 








~ 








然 也 有 于 





啊 到 父 元 素 。 











因此 ， 阻 止 事件 冒 











的 事件 冒 泡 都 是 对 开发 有 利 的 ， 实 际 开发 
泡 的 传播 也 是 一 种 重 
































泡 的 写法 ， 由 于 浏览 器 的 兼容 性 问题 ， 
可 以 将 e.cancelBubble 


请 
于 

















疝 





























性 设 为 true; 对 于 其 他 











function myParagraphEventHandler(e) { 


e=el window.event; 


if (e.stopPropagation) { 
e.stopPropagation(); // 正 8 以 外 的 浏览 器 
































容 写法 ， 基 本 语法 如 下 : 























存在 两 种 不 同 写法 。 对 于 
浏览 





IE8 
， 则 可 以 调用 

















} else { 
e.cancelBubble = true; // IE8 之 前 
} 
} 
15.3.5 00000D0 
除了 事件 冒 泡 ， 还 有 一 种 情况 存在 妨碍 开发 的 问题 ， 那 就 是 某 些 标 签 的 默认 事件 。 比 
如 ，a 标签 自 带 跳 转 页 面 功能 ， submit 标签 自 带 提 交 表 单 功 能 ，reset 标签 自 带 清除 表单 功 
能 …… 这 些 功 能 在 需要 的 情况 下 ， 都 是 人 们 的 得 力 助手 。 但 是 ， 不 需要 的 时 候 ， 它 们 就 会 影 
响 功能 的 实现 效果 。 这 时 候 就 需要 选择 取消 HTML 全 SS 中 
取消 默认 事件 也 有 两 种 常用 方式 。 对 于 正 8 之 前 的 浏览 器 ， 可 以 将 e.returmValue 属性 设 


为 false; 























基本 语法 如 下 : 


function eventHandler(e) { 
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对 于 正 8 以 外 的 浏览 器 

















， 可 以 调 | 














e=el window.event; 


/ 阻止 默认 行为 


if (e.preventDefault) { 
e.preventDefault(); /WIE 以 外 


} else { 


e.returnValue = false; //IE 


| rd 同样 














9 也 有 兼容 写法 ， 
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15.4 章节 案例 : 对 表格 进行 修改 删除 操作 


使 用 之 前 学 过 的 HTML DOM 操作 表格 单元 格 ， 以 及 本 章 所 学 的 键盘 事件 ， 实 现 表格 单 
元 格 内 数据 的 修改 及 删除 操作 。 最 终 实现 效果 如 图 15-9 所 示 。 

【主要 实现 功能 

> 单 击 “修改 ”将 单元 格 变 为 可 编辑 状态 ， 同时 将 “修改 ”二 字 变 为 “完成 ” 
单 击 “ 完 成 ”结束 修改 操作 ， 并 将 “完成 ”二 字 变 为 “修改 ”。 
下 Enter 键 ， 结 束 修改 操作 ， 同时 将 “ “完成 ”二 字 变 为 “修改 ”。 
击 “ 删 除 ” 将 本 行内 容 添加 删除 线 〈 无 须 真实 地 删除 数据 )， 同 时 取消 修改 、 删 
除 的 操作 。 
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式 注 





口 表格 扣 作 
CG |© 127.0.0.1:8020/1705-t 


zhangsan | 张 三 13899999999 可 用 修改 删除 





zhangsan | 王 二 13888888888 可 修改 删除 








【案例 代码 】 


<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 

#table{ 
width: 600px; 
height: 200px; 
border-collapse: collapse; 

} 

#table td,th{ 
border: 1px solid #C5C9CE:; 

} 

#table th{ 
background-color: #95B3D7; 
color: white; 

} 

#table td:first-child,td:last-child{ 
text-align: center; 

} 

#table td:last-child{ 
color: #2172B8; 
cursor: pointer; 
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} 
</style> 
</head> 
<body> 
<table id='"table"> 
<tr> 
<th> 用 户 ID</th> 
<th> 用 户 姓名 </th> 
<th> 手 机 号 码 </th> 
<th> 状 态 <th> 
<th> 操 作 </th> 
</tr> 
<tr> 
<td>zhangsan</td> 
<td> 张 三 </td> 
<td>13899999999</td> 
<td> 可 用 </td> 
<td> 
<a onclick="update(1)"> 修 改 </a> 
<a onclick="deletes(1)"> 市 除 </a> 
</td> 
</tr> 
<tr> 
<td>lisi</td> 
<td> 李 四 </td> 
<td>13866666666</td> 
<td> 可 用 </td> 
<td> 
<a onclick="update(2)"> 修 改 </a> 
<aonclick='"deletes(2)"> 删 除 </a> 
</td> 
</tr> 
<tr> 
<td>wangermazi</td> 
<td> 王 二 </td> 
<td>13888888888</td> 
<td> 可 用 </td> 
<td> 
<a onclick="update(3)"> 修 改 </a> 
<aonclick='"deletes(3)"> 删 除 </a> 
</td> 
</tr> 
</table> 


<script type=" text/javascript" > 
var table = document.getElementByld("table'"); 
function deletes(index){ 
var cells = table.rows[index].cells; 
if(!lconfirm(" 您 确认 加 除 一 条 记录 吗 ?")){ 
alert(" 操 作 已 取消 "); 
return; 
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} 
for(var 1=0; i<cells.length; 1++){ 
cells[il.style.color = "#CCC"; 
cells[il.style.textDecoration = "line-through"; 
} 
var a= cells[cells.length-1].getElementsByTagName("a"); 
a[0].removeAttribute("onclick"); 


a[lll].removeAttribute("onclick"); 


} 
function update(index){ 
var cells = table.rows[index].cells; 
var a= cells[cells.length-1].getElementsByTagName("a"); 
if(a[0].innerText == "修改 "){ 
for(var 1=0; 1<cells.length—1; i++){ 
cells[i].setAttribute("contenteditable", "true"); 
} 
a[0].innerText = "完成 "; 
}else{ 
for(var 1=0; 1<cells.length—1; 1++){ 
cells[i].setAttribute("contenteditable", "false"); 
} 
af[0].innerText = "修改 "; 
} 
document.onkeyup = function(e){ ”// 按 下 Enter 键 完成 修改 操作 
if(e.keyCode == 13){ 
return false; 
for(var 1=0; i<cells.length—1; i++){ 
cells[i].setAttribute("contenteditable", "false"); 





} 
a[0].innerText = "修改 "; 
} 
} 
} 
</script> 
</body> 
</html> 
【章节 练习 】 
1. 鼠标 事件 包括 、onmouseup、 S 、 onmouseover、 NS 








键盘 事件 的 执行 顺序 是 什么 ? 

确定 键盘 按键 的 方法 ， 写 出 代码 表示 。 
添加 事件 绑 定 和 取消 事件 绑 定 的 方法 ， 写 出 代码 表示 。 
阻止 事件 冒 泡 和 阻止 默认 事件 的 方法 ， 写 出 代码 表示 。 
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JavaScript 中 的 所 有 习 
与 对 象 相 关 的 值 ， 方 法 是 能 够 在 对 象 上 执行 的 动作 。 


组 对 象 的 作用 是 使 用 单独 的 变量 名 来 存储 一 系列 的 值 。 


U luU OO00060 








事物 都 是 对 象 。 对 象 是 带 有 属 





























本 章 学 习 目 标 : 
> 掌握 数组 的 常用 方法 。 








> 掌握 JavaScript 内 置 对 象 的 属性 和 方法 。 
> 掌握 JavaScript 自 定 义 对 象 的 属性 和 方法 。 














通过 本 音 的 学 习 ， 读 者 可 以 使 用 




















































































































JavaScript 提供 











的 多 种 数组 方法 、 





性 和 方法 的 特殊 数据 类 型 ， 




















中 属性 











数组 也 是 对 象 ， 它 是 一 种 集合 型 对 象 。 


多 种 内 置 对 象 的 属性 


是 
数 



















































































在 单个 的 变量 











的 元 素 按 
区 分 变量 











和 方法 简便 、 高 效 地 实现 对 变量 值 的 操作 。 
16.1 Javascript 的 数组 
数组 对 象 用 来 在 单独 的 变量 名 中 存储 一 系列 的 值 ， 即 它 的 主要 作用 是 用 了 
中 存储 多 个 值 。JavaScript 提供 了 许多 数组 对 象 的 属性 和 方法 ， 大 大 方便 了 人 们 对 数据 的 
操作 。 
16.1]1 00O0D000 
数组 是 在 内 存 中 连续 存储 多 个 有 序 元 素 的 结构 。 所 谓 数组 ， 就 是 相同 数据 类 型 
一 定 顺序 排列 的 集合 ， 就 是 把 有 限 个 类 型 相同 的 变量 用 一 个 名 学 命名 ， 然 后 用 编号 
的 集合 ， 这 个 名 字 称 为 数组 名 ， 编 号 称 为 下 标 。 
组 成 数组 的 各 个 变量 称 为 数组 的 分 量 ， 也 称 为 数组 的 元 素 。 数 组 是 多 个 相同 类 型 




























































































数据 的 






























































组 合 ， 实 现 对 这 些 数据 的 统一 管理 。 数 组 中 的 元 素 可 以 是 任何 数据 类 型 ， 包 括 基本 类 型 和 引 
用 类 型 。 数 组 属于 引用 类 型 ， 数 组 型 数据 是 对 象 objecb)， 数 组 中 的 每 个 元 素 相 当 于 该 对 象 
的 成 员 变 量 。 
16.12 [D000 

数组 对 象 可 以 分 为 一 维 数组 与 二 维 数组 。 本 小 节 仅 介绍 一 维 数组 ， 二 维 数 组 在 下 一 节 中 
会 作 简单 介绍 ， 了 解 即 可 。 声 明 数 组 的 语法 分 为 两 种 ， 一 种 是 直接 使 用 方 括号 声明 ;， 另 二 种 
是 使 用 new 关键 字 声 明 ， 实 例 化 Cnew) 一 个 array 对 象 。 

















值 。 





1. 字面 量 声明 


























字面 量 声明 就 是 直接 使 ) 
基本 语法 如 下 ; 
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] 方 括号 声明 ， 方 括号 中 可 以 直接 传 入 元 素 ， 








表示 数组 的 各 个 


er 
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var arr = []; 




















JavaScript 中 同一 数组 ， 可 以 储存 多 种 不 同 的 数据 类 型 ， 但 一 般 同 一 数组 只 用 于 存放 同 
一 种 数据 类 型 。 语 法 结构 如 下 : 














var arr = [1,"2",true,{ "name":" 张 三 "},[1,2]]; 
2. new 关键 字 声 明 


通过 new 关键 字 实例 化 一 个 数组 对 象 ， 并 把 这 个 数组 对 象 的 句柄 赋值 给 一 个 变量 。 语 
法 结构 如 下 : 








串 





var arr = new Array( 参 数 ); 


其 中 参数 可 以 有 以 下 三 种 情况 。 
1) 不 写 ， 即 括号 内 没有 内 容 ， 表 示 声 明 一 个 没有 指定 长 度 的 数组 。 





























var arr = new Array(); 




















2) 写 入 数值 ， 即 数组 的 长 度 ， 表 示 声 明 一 个 指定 长 度 的 数组 ， 但 是 数组 的 长 度 随 时 可 
变 ， 可 追加 ， 最 大 长 度 为 0 一 (31)。 


var arr = new Array(20); V/ 声明 长 度 为 20 个 数 的 数组 





3) 写 入 数组 默认 的 N 个 值 ， 例 如 new Array(1,"2",true); 相当 于 数组 有 三 个 默认 值 
[1,"2",true]。 























var arr = new Array(“1”,2,true); 


注意 : 使 用 var arr = [] 的 方式 创建 的 数组 ， 相 对 来 说 要 比 new Array0) 创 建 的 数组 在 性 能 
方面 要 更 好 。 


3. 引用 数据 类 型 和 基本 数据 类 型 
(1) 引用 数据 类 型 
(数组 或 对 象 ) 赋值 时 ， 将 原 变量 的 地 址 赋 给 新 变量 。 两 个 变量 实际 上 操作 的 是 同一 份 
数据 ， 所 以 修改 其 中 一 个 变量 ， 另 一 个 会 跟着 变化 。 代 码 示 例如 下 : 
var arr = new Array(1,2,3); // 创建 一 个 数组 arr， 数 组 是 引用 数据 类 型 
var brr = arr; // 将 arr 赋值 给 br， 实际 上 是 将 数组 的 地 址 赋值 给 brr 
brr[0] = "a"; W brr 通过 地 址 修改 了 数组 的 第 0 个 值 
console.log(arr[0]); /再 次 打印 arr 的 第 0 个 值 ， 实 际 上 访问 的 是 同一 个 数组 ， 因 此 arr[0] 也 是 "a" 


(2) 基本 数据 类 型 
赋值 时 ， 是 将 原 变 量 的 值 赋 给 新 的 变量 。 两 个 变量 属于 不 同 的 内 存 空间 ， 修 改 其 
个 ， 不 会 影响 男 一 变量 的 值 。 代 码 示例 如 下 : 
var a= 10;// 创建 一 个 变量 a， 变 量 是 基本 数据 类 型 
varb=ayV/ 将 a 的 值 赋值 给 b 
b=20;// 将 b 的 值 修 改 为 20 
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console.log(a); /a、b 为 两 个 不 同 的 变量 ，a 的 值 不 会 受 影 响 





16.13 DODOODOD 
数组 的 访问 主要 分 为 两 种 操作 ， 一 种 是 通过 数组 的 下 标 读 取 数 组 的 元 素 值 、 通 过 数组 下 
标 给 数组 赋予 新 值 ， 另 一 种 是 通过 JavaScript 提供 的 方法 实现 对 数组 元 素 的 增删 操作 。 
1. 数组 对 象 的 读 写 
1) 读 : 通过 下 标 来 访问 元 素 。 语 法 结构 如 下 : 
var arrValue = arr[2]; V 访问 数组 下 标 为 2 的 元 素 值 ， 即 数组 的 第 三 个 值 
2) 写 : 通过 下 标 来 写 入 元 素 。 语 法 结构 如 下 : 
arr[1]= "要 赋予 新 值 "; // 给 数组 下 标 为 1 的 元 素 赋予 新 的 值 ， 也 就 是 数组 的 第 二 个 值 
2. 数组 对 象 的 增删 
1) delete arrIn]: 删除 数组 的 第 na 个 值 ， 但 数组 长 度 不 变 ， 对 应 位 置 值 变 为 Undefined 。 
2) arrpush( 值 ); 数组 最 后 增加 一 个 值 ， 数 组 长 度 加 1， 相当 于 arrlength += 1。 
3) arrunshift( 值 ): 数组 的 第 0 位 插入 一 个 值 ， 其 余 位 顺延 。 
4) arr.pop0: 删除 数组 最 后 一 位 。 与 delete 不 同 的 是 ，pop 执行 后 数组 长 度 也 会 减少 一 
个 ， 相 当 于 arrlength -= 1。 
5) arrshift0: 删除 数组 第 0 位， 长 度 也 会 减 1， 其 余 位 的 下 标 依次 改变 。 
注意 : 调用 上 述 方法 后 ， 会 直接 修改 原 数 组 的 值 。 
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16.14 [DDDU0O 
16.1.3 节 中 已 经 介绍 了 数组 对 象 的 增删 方法 ， 如 pop0、push0 等 ， 人 们 可 以 发 现 这 些 方 
法 对 于 操作 数组 中 的 数据 很 有 帮助 ， 接 下 来 继续 学 习 一 些 更 有 用 的 数组 对 象 的 方法 。 
1. join("'separator ”) 
join0) 将 数组 用 指定 分 隔 符 分 隅 ， 连 接 为 字符 串 。 参 数 为 空 时 ， 默 认 用 过 号 分 隔 。 
语法 结构 如 下 : 




























































































\ 





Var arrl = arr.jJoin("separator"); 


注意 : 

a WY 

> 参数 separator 表示 字符 串 中 元 素 的 分 隔 符 ， 可 以 为 空 ， 默认 为 半角 运 号 。 
> 该 方法 并 不 修改 原 数组 ， 需 要 返回 一 个 新 的 变量 。 


代码 示例 如 下 : 


<script type=" text/javascript"> 
var arr = new Array(3); / 声明 一 个 数组 arr 
arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 
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");// 将 更 改 后 的 数组 赋值 给 一 个 新 变量 后 ， 传 回 新 变量 





Var arrl = arr.jJoin(" 





由 5 


console.log(arrl); 
</script> 





代码 运行 效果 如 图 16-1 所 示 。 














Network Performance Memory Application 


Default levels Y 


93- 数 组 方法 .htm1? hbt=1512367776994:21 














图 16-1 数组 join0 方 法 效果 


2. concatO 
concat0 将 两 个 或 两 个 以 上 的 数组 连接 成 一 个 数组 ， 并 返回 连接 后 的 数组 。 原 数组 不 会 
改变 ， 需 要 返回 一 个 新 的 变量 。 语 法 结构 如 下 : 
Var newArr = arr.concat(arr1);// 将 arr 与 arrl 连接 成 新 数组 


[1,2].concat([3,4],[5,6]) =[1,2,3,4,5,6]; V/ 连接 时 ， 中 括号 最 多 拆 一 层 
[1,2].concat([1,2,[3,4]]) =[1,2,1,2,[3,4]]; / 多 层 中 括号 ， 以 二 维 数组 形式 存在 























注意 : 
> 该 方法 并 不 会 改变 现 有 的 数组 ， 而 是 返回 被 连接 的 多 个 数组 的 一 个 副本 。 
> 如 果 多 个 数组 里 有 值 相 同 的 元 素 ， 则 不 会 重复 出 现 ， 而 会 把 重复 的 元 素 过 滤 掉 。 


代码 示例 如 下 : 


<Script type=" text/javascript"> 
Var arr = new Array(3); 
arr[0] = "George"; 
arr[1] = "John"; 
arr[2] = "Thomas"; 
var arrl =new Array(1); // 声明 一 个 新 数组 arrl 
arrl[0] = "Amy"; 











var newArr = arr.concat(arrl); // 原 数组 不 改变 ， 需 要 将 更 改 后 的 数组 赋值 给 一 个 新 变量 
newArr， 传 回 新 变量 newArr 
console.lognewArD); 














</script> 


代码 运行 效果 如 图 16-2 所 示 。 
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Elements Console Sources Network Performance Memory ” Application ”Security » 


v | Filter Default levels 了 


Pp (4) ["George”, "JIohn" "Thomas", "Amy"] 83- 数 组 方法 .html? hbt=1512368889633:26 
> | 














图 16-2 数组 concat0 方 法 效果 


3. reverse() 


reverse(0 用 于 数组 翻转 ， 逆 序 排 列 ， 把 数组 的 所 有 元 素 顺 序 反 转 。 语 法 结构 如 下 ; 
atr.reverse(); / 翻转 ， 使 数组 中 的 值 倒序 输出 














注意 : 该 方法 会 直接 修改 数组 ， 而 不 会 创建 新 的 数组 。 
代码 示例 如 下 : 


<Script type=" text/javascript"> 
var arr = new Array(3); 

arr[0] = "George"; 

arr[1] = "John"; 

arr[2] = "Thomas"; 


arr.reverse(); ”// 翻转 ， 使 数组 中 的 值 倒序 输出 
console.log(arr); 
</script> 


代码 运行 效果 如 图 16-3 所 示 。 





Elements Console Sources Network ”Performance Memory Application ” Security » 


v | Filter Default levels Y 


"John", "George"] 93- 数 组 方法 .html? hbt=1512368889633:29 














图 16-3 数组 reverse 0 方法 


4. slice(start,end) 


slice0 鹤 取 数 组 中 指定 位 置 的 元 素 ， 并 返回 一 个 新 的 子 数组 。 语 法 结构 如 下 : 









































var sliceArr = art.slice(1,2); 


> 该 方法 不 会 改变 现 有 的 数组 ， 而 是 原 数组 的 一 个 子 数组 。 
> 参数 start 是 必 选 ， 表 示 开 始 下 标 。start 为 负数 ， 表 示 从 末尾 开始 ; -1 表示 最 后 一 个 
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元 素 ， 依 次 类 推 。 
> end 是 可 选 ， 表示 结束 下 标 ， 如 果 没 有 指定 ， 表示 到 结尾 元 素 。 


代码 示例 如 下 : 


<script type=" text/javascript"> 
Var arr = new Array(3); 
arr[0] = "George"; 
arr[1] = "John"; 
arr[2] = "Thomas"; 











var sliceArr = arr.slice(1,2); // 截取 下 标 为 1 的 值 到 下 标 为 2 的 值 ， 左 开 右 闭 ， 不 包含 下 标 为 2 的 值 
console.log(sliceArr); 





</script> 





代码 运行 效果 如 图 16-4 所 示 。 























图 16-4 数组 slice 0 方法 效果 


S. sort(function) 
sortO 对 数组 进行 排序 ， 默 认 按照 ASCII 码 进行 升序 排列 。 如 果 在 0 里 面 传 入 函数 ， 可 以 
按照 数值 的 大 小 ， 自 行 选择 进行 升序 或 者 降序 排列 。 语 法 结构 如 下 : 


arr.sort(); ”1 将 原 数组 按照 ASCII 人 码 进 行 升序 排列 


























\ 








> 不 指定 排序 函数 : 按照 元 素 的 ASCII 码 值 进行 升序 排列 ; 
> 传 入 排序 函数 : 默认 传 入 两 个 参数 a 和 b， 如 果 返 回 值 大 于 0， 则 a>b， 升 序 排列 ; 
如 果 返 回 值 小 于 0， 则 asb， 降 序 排列 。 语 法 结构 如 下 : 
arr.sort(function(a,b){ 


//return a-b; /b 在 前 ，a 在 后 (升序 排列 ) 
return b-a; //a 在 前 ,b 在 后 (降序 排列 ) 











)); 
代码 示例 如 下 : 


var arr = [12,2,1,3,9,5,6,4,7,8]: 
arr.sort(); 


console.log(arr); // 将 原 数组 按照 ASCII 码 进行 升序 排列 
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arr.sort(function(a,b){ 
// return a-b; // 将 原 数组 按照 数值 大 小 进行 升序 排列 
return b-a; // 将 原 数组 按照 数值 大 小 进行 降序 排列 








); 


console.log(ar?); 





代码 最 终 运 行 效果 如 图 16-5 所 示 。 











Performance Memory Application » 


Default levels 了 


93- 数组 方法 .html? hbt=1512 





93- 数 组 方法 .htm12 hbt=151237 











图 16-5 数组 sort0 方 法 效果 


6. splice() 








spliceO 从 数组 指定 位 置 删除 指定 数量 的 元 素 ， 并 返回 被 删除 的 元 素 。 基 本 语法 如 下 ; 

















atr.splice(2,1); // 删除 下 标 为 2 的 值 
arr.splice(1,0," 新 值 "); // 在 下 标 为 1 的 位 置 插入 一 个 新 值 
atr.splice(2,1," 新 值 "); // 将 下 标 为 2 的 值 蔡 换 为 新 值 























:十 二 
) 王 怕 : 


> 该 方法 会 直接 修改 数组 。 


> splice() 方法 与 slice0 方法 的 作用 是 不 同 的 ，splice() 方法 会 直接 对 数组 进行 修改 ， 
而 slice 只 是 截取 原 数 组 的 一 部 分 后 返回 一 个 子 数组 ， 并 不 会 修改 原 数 组 。 


代码 示例 如 下 : 


<script type=" text/javascript"> 
var arr = new Array(3); 
arr[0] = "George"; 
arr[1] = "John"; 
arr[2] = "Thomas"; 





arr.splice(2,1); / 把 下 标 为 2 的 值 删除 
art.splice(1,0," William"); / 在 下 标 为 1 的 位 置 插入 一 个 值 William 
arr.splice(2,1," Amy'"); / 把 下 标 为 2 的 值 蔡 换 为 Amy 





console.log(arr); 
</script> 








A 一 一 


ES 














代码 运行 效果 如 图 16-6 所 示 。 先 将 第 三 个 值 “Thomas” 删 除 ， 然 后 在 























2 


个 值 的 位 置 























上 插入 一 个 值 “William”， 第 三 步 将 第 三 个 值 “John” 替 换 为 “Amy”。 
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Network Performance Memory Application Securty » 


Default levels Y 


bp (3) ["George”", "WilLLiam"”, "Amy"] 83- 数 组 方法 .html? hbt=1512368889633:39 
> | 














图 16-6 数组 splice 0 方法 


7. indexOf(value,index) /lastIndexOf(value,index) 
1) indexOf(value,index): 返回 数组 中 第 一 个 value 值 对 应 的 下 标 位置 ， 若 未 找到 ， 返 
-1。 语 法 结构 如 下 : 























可 





var indexl = arrindexOf( 查 询 的 数值 ,index); 


2) lastIndexOf(value,index): 返回 数组 最 后 一 个 value 值 对 应 的 下 标 位 置 ， 若 未 找到 ， 返 
回 -1。 语 法 结构 如 下 : 


























var index2 = arr.lastIndexOf( 查 询 的 数值 ,index); 


注意 : 
> 若 未 指定 index 参数 ， 则 默认 在 数组 所 有 元 素 中 查询 。 
> 车 指定 index 参数 ， 则 从 当前 index 开始 ， 向 后 查询 。 


代码 示例 如 下 : 


var arr = [1,2,3,4,5,6,6,6]; 
var index = arr.indexOf(6,2); // 从 arr[2] 开 始 查 找 6 出 现 的 第 一 个 位 置 


Var indexl = arrlastIndexOf(6,-2); V/ 查找 6 出 现 的 最 后 一 个 位 置 ， 到 倒数 第 二 个 位 置 停止 
console.log(index); 











console.log(index1); 





代码 运行 后 ， 在 数组 中 的 下 标 如 图 16-7 所 示 。 











ents Console Sources Network Performance Memory ”Application » 


v | Filter Default levels Y 


93- 数 组 方法 .htm13 hbt=1512373854451:56 
83- 数 组 方法 .html? hbt=1512373954451:57 














图 16-7 数组 indexOf 0 和 1lastImndexOf() 方 法 效果 


8. forEach() 
forEach0) 专 门 用 于 循环 人 遍历 数组 。 接 收 一 个 回调 函数 ， 回 调 函 数 可 以 接收 两 个 参数 ， 第 
一 个 参数 为 数组 每 一 项 的 值 ， 第 二 个 参数 为 数组 的 下 标 。 语 法 结构 如 下 : 
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arr.forEach(function(item,index){ 
console.log(item); 


1 
代码 示例 如 下 : 


Var arr = [1,2,3]; 
arr.forEach(function( item,index ){ 
console.log(item); 


)); 
代码 运行 后 ， 在 控制 台 打 印 效果 如 图 16-8 所 示 。 




















Network Performance Memory Application » 


Elements Console Sources 


Default levels Y 
3- 汝 组 方法 .htm]3 

方法 .html3 

方法 .html3 




















图 16-8 ”数组 forEach 0 方法 





9. map0 
map() 数 组 映射 。 使 用 方式 与 forEachO 相 同 。 与 forEachO) 不 同 的 是 ，map0 可 以 有 return 


回 值 ， 表 示 将 原 数 组 的 每 个 值 进行 操作 ， 返 回 一 个 新 数组 。 语 法 结构 如 下 : 












































返 
var atrl = arrmap(function( item,index ){ ”// 数 组 映射 
return item-1; // 将 原 数 组 的 每 个 值 -1 后 ， 返 旧 
)); 
代码 示例 如 下 : 


var arr = [1,2,3]; 
var arr0 = arr.map(function( item,index ){ /数组 映射 返回 一 个 新 数组 


return item-1; // 将 原 数组 的 每 个 值 -1 后 ， 返 划 














DB 
console.log(arr0); 





代码 运行 后 ， 在 控制 台 打 印 效果 如 图 16-9 所 示 。 

















Network Performance Memory Application » 


ts Console Sources 


Default levels 了 


83- 数 组 方法 .html? hbt=151 








图 16-9 数组 map0 方 法 ， 返 回 的 值 -1 
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16153 0U00000060 
二 维 数组 是 一 维 数组 的 推广 ， 按 照 某 种 次 序 将 数组 元 素 排列 到 一 个 序列 中 ， 它 必须 有 两 

















个 下 标 〈“ 行 、 列 ) 以 标识 该 元 素 的 位 置 。 所 谓 稀 朴 数组 就 是 数组 中 大 部 分 的 内 容 值 都 未 使 用 
《或 都 为 零 )， 在 数组 中 仅 有 少 部 分 的 空间 使 用 。 这 两 个 知识 点 本 书 中 只 做 概念 性 了 解 ， 





内 容 不 做 叙述 。 
(1) 稀疏 数组 























数组 并 不 含有 从 0 开始 到 length-1 的 所 有 索引 (length 值 比 实际 元 素 个 数 多 )。 


(2) 二 维 数组 














二 维 数组 又 称 为 矩阵 ， 如 var arr = [[1,2],[3,4],[5,6]]; 相当 于 三 行 两 列 的 矩阵 。 
读 取 二 维 数组 元 素 的 方法 ， 语 法 结构 如 下 : 


arr[ 行 号 ][ 列 号 ]; 








注意 : 可 以 使 用 训 套 循环 遍历 取得 数组 所 有 元 素 。 
在 控制 台 打 印 输出 了 一 个 二 维 数组 ， 代 码 示例 如 下 : 


Var arr4 = [[1,2,3], [4,5,6], [7,8,9], [0,1,2]]; 
for (var i=0;i<arr4.length;i++) { 
for (var j=0;j <arr4[i].length;j++) { 





console.log(arr4[i[D]); 
} 
Consoleil02( = 和 
} 
代码 运行 后 在 控制 台 打 印 效果 如 图 16-10 所 示 。 


























Performance Memory Application » 
Default levels 了 


SCXE7%B6BX%B4XE6X%95%BBXE7%BB%84.html:1 


























%34.html :14 


:html:12 





























图 16-10 二 维 数组 元 素 的 读 取 效 果 














其 他 
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16.2 Javascript 的 内 置 对 象 


FS 

















JavaScript 常见 的 内 置 对 象 有 Object、Math 、String 、Array 、Number 、Function 、 





























Boolean、JSON 等 。 其 中 ，Object 是 所 有 对 象 的 基 类 ， 采 用 了 原型 继承 方式 。 之 前 的 章节 介 


























绍 了 array 数组 对 象 ， 接 下 来 学 习 其 他 一 些 比较 常用 的 内 置 对 象 。 
16.2.1 _ Booleanl DODOD 





























Boolean 〈 布 尔 ) 对 象 用 于 取 到 一 个 Boolean 类 型 的 变量 。 
关键 字 两 种 方式 取 到 一 个 Boolean 类 型 的 变量 。 
1，Boolean 的 声明 












































可 以 使 用 字面 量 方 式 和 new 















































Boolean 变量 的 声明 方式 有 两 种 。 一 种 是 使 用 字面 量 方式 声明 的 变量 ， 使 









































typeof 检测 


Se 








是 Boolean 类 型 ， 另 一 种 是 使 用 new 关键 字 声 明 的 变量 ， 使 用 typeof 检测 是 Object 类 型 。 语 





法 结构 如 下 : 





























Var boolean = true; // 使 用 字面 量 方式 声明 
var newBoolean = new Boolean(false); // 使 用 new 关键 字 声 明 




















console.log(typeof boolean); / 使 用 typeof 检测 的 数据 类 型 为 Boolean 
console.log(typeof newBoolean); // 使 用 typeof 检测 的 数据 类 型 为 Object 








2。Boolean 转换 函数 




















除了 基本 的 变量 声明 以 外 ，Boolean0 作 为 一 个 函数 ， 还 可 以 
值 (true 或 者 false )。 






































] 于 将 非 布尔 值 转换 为 布尔 




















将 Boolean 对 象 理 解 为 一 个 产生 逻辑 值 的 对 象 包装 器 ， 如 果 轴 辑 对 象 无 初始 值 或 者 其 值 为 
0、-0、null、""、false、undefined、NaN， 那 么 返回 的 值 为 false; 和 否则， 其 值 为 true。 




















代码 示例 如 下 : 









































/ 下 面 的 所 有 的 代码 行 均 会 创建 初始 值 为 false 的 Boolean 对 象 











var myBoolean= Boolean(); 

var myBoolean= Boolean(0); 
var myBoolean= Boolean(null); 
var myBoolean= Boolean(""); 
var myBoolean= Boolean(false); 
var myBoolean= Boolean(NaN); 








/ 下 面 的 所 有 的 代码 行 均 会 创建 初始 值 为 tue 的 Boolean 对 象 


var myBoolean= Boolean(]); 











var myBoolean= Boolean(true); 

var myBoolean= Boolean("true"); 

var myBoolean= Boolean("false"); 

var myBoolean= Boolean("Bill Gates"); 


16.22 NumberU DODDOD 
在 JavaScript 中 ， 数 字 是 一 种 基本 的 数据 类 型 。 在 必要 时 ， 
230 








JavaScript 会 自动 地 在 原始 
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数据 和 对 象 之 间 转 换 。 构 造 函数 Number() 可 以 不 与 运算 符 new 一 起 使 用 ， 而 直接 作为 转 





化 函数 来 使 用 。 
1，Number 的 声明 
语法 结构 如 下 : 














varnuml = 10; // 字面 量 声明 
Var num2 = new Number(10); // new 关键 字 声 明 














console.log(typeof num1); // 使 用 typeof 检测 的 数据 类 型 为 Number 
console.log(typeof num2); // 使 用 typeof 检测 的 数据 类 型 为 Object 























2. Number 的 属性 




















1) MIN_VALUE: Number 对 象 的 属性 ， 可 表示 的 最 小 数 。 语 法 结构 如 下 : 


Number.MAX VALUE: 








2) MAX_VALUE: Number 对 象 的 属性 ， 可 表示 的 最 大 








NumberMIN_VALUE; 
3. Number 的 方法 


1) toString(): Number 对 象 的 方法 ， 将 数字 转 为 字符 
如 下 : 





var str = num1 .toString(); 


























串 String 对 象 。 








数 。 语 法 结构 如 下 : 











2) toFixed(n): Number 对 象 的 方法 ， 将 数字 转 为 字符 
语法 结构 如 下 : 








var num = new Number(10.128); 
console.log(num.toFixed(2));，/W/ 保 留 两 位 小 数 ， 结 果 为 10.1 











串 ， 相 当 于 num+""。 





语法 结构 


使 用 typeof 检测 str 的 数据 类 型 为 String， 说 明 toString0 方 法 将 Number 对 象 转 为 了 


[= 4 


字符 


日， 保留 卫 位 小 数 ， 四 舍 五 入 。 


3 




















3) valueOfO: Number 对 象 的 方法 ， 返 回 Number 对 象 的 基本 数字 值 。 语 法 结构 如 下 : 


varnuml = 10; 
var str = numl.valueOfO; 
console.log(str); V/ 打印 结果 为 10 








4) toLocaleString0: Number 对 象 的 方法 ， 将 数字 按照 本 地 格式 的 顺序 转 为 字符 


般 ， 三 个 为 一 组 加 有 逗号。 语法 结构 如 下 : 


varnuml = 101123128; 

var str = numl.toString(O); 

var str = str.toLocaleString() 

console.log(str); V/ 打印 结果 为 101,123,128 





器 
日 


ud 
o 
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5) toPrecision(n): Number 对 象 的 方法 ， 将 数字 格式 化 为 指定 长 度 ，n 为 不 含 小 数 点 的 
所 有 位 数 和 。 语 法 结构 如 下 ; 
var numl = 101123128.456123; 


Var str = numl.toPrecision(10); 
console.log(str); / 打印 结果 为 101123128.5 一 共 10 位 数 





16.23 String] DDODOOO 

字符 串 是 JavaScript 的 一 种 基本 的 数据 类 型 。String 对 象 的 length 属性 声明 了 该 字符 
串 中 的 字符 数 。String 类 定义 了 大 量 操作 字符 串 的 方法 ， 如 从 字符 串 中 提取 字符 或 子 串 ， 或 
者 检索 字符 或 子 串 。 

1，String 对 象 的 属性 

字符 串 String 类 型 的 每 个 实例 都 有 一 个 length 属性 ， 表 示 字 符 串 中 的 字符 个 数 。 由 于 字 
符 串 是 不 可 变 的 ， 所 以 字符 串 的 长 度 也 不 可 变 。length 属性 语法 结构 如 下 : 


strlength; // 返回 字符 串 的 长 度 











忆 















































注意 : 对 于 字符 串 来 说 ， 最 后 一 个 字符 的 索引 是 strlength - 1。 
代码 示例 如 下 : 


var str = "Whats Your Name? "; 
console.log(str.length); / 打印 结果 为 17 








代码 运行 后 在 控制 全 打印 效果 如 图 16-11 所 示 。 
































ents Console Sources 


v | Filter 














图 16-11 String 对 象 的 length 属性 效果 





2.。String 对 象 的 方法 
1) toLowerCase0: 所 有 字符 转 为 小 写 。 语 法 结构 如 下 : 


var str = str.toLocaleLowerCase(); ，// 转 全 小 写 
2) toUpperCase0: 所 有 字符 转 为 大 写 。 语 法 结构 如 下 : 


var str = str.toLocaleUpperCase(); // 转 全 大 写 








3) charAt(n): 和 截取 字符 串 中 第 n 个 字符 。 语 法 结构 如 下 : 




















var str = str.charAt(n)，// 截取 数组 的 第 n 个 字符 ， 相 当 于 str[n] 


258 


第 16 章 数组 和 对 象 


4) indexOf(" 查 询 子 串 ",index): 查询 从 index 开始 的 ， 第 一 个 子 串 的 索引 。 没 找到 返回 
-1， 与 数组 的 indexOf0 方 法 相同 。 语 法 结构 如 下 : 








var str = str.indexOf(" 查 询 的 子 串 "); 


5) substring(begin,end): 截取 子 串 ， 
QD 只 写 一 个 参数 时 ， 表 示 从 begin 六 


两 个 参数 ，begin 必 选 ，end 可 选 。 
F 始 直到 最 后 。 











包 写 两 个 参数 时 ， 表示 从 begin 开始 ， 到 end 结束 ， 左 闭 右 于 


end。 


语法 结构 如 下 : 


Var str = str.substring(n); 





6) replace("old","new"): 表示 将 字符 串 中 的 第 一 个 old 替换 
或 替换 一 个 与 正则 表达 式 匹 配 的 子 旨 
第 一 个 参数 可 以 为 普通 字符 串 ， 也 可 以 为 正则 表达 式 〈 普 通 字符 串 


er 24 


串 中 用 一 些 字符 蔡 换 另 一 些 字符 ， 








则 表达 式 则 根据 基体 情况 区 分 )。 语 法 结 


var strl = str.replace("a","*"); // 只 替换 字符 上 
// 使 用 ] 


Var strl = str.replace(/a/g,"*"); 
代码 示例 如 下 ; 


<script type=" text/javascript"> 
var str = "Whats Your Name? "; 








1// 从 第 n 个 























F， 即 包含 begin， 不 含 





截取 到 最 后 


ep Me 


= 








为 new。 此 方法 用 于 在 





日 
所 











将 只 匹配 第 一 个 ， 正 








构 如 下 : 


的 第 一 个 a 为 * 
E 则 ， 蕉 换 字符 串 中 的 所 有 a 为 * 




















var strl = str.replace("a","*"); // 只 蔡 换 字符 串 的 第 一 个 a 
var str2 = str.replace(/a/g,"*"); // 蔡 换 字符 溃 的 所 有 a 
console.log(str1); 
console.log(str2); 
</script> 
代码 运行 后 在 控制 台 打 印 效 果 如 图 16-12 所 示 。 





























Wh*t"s Your Name? 


Wh*t"'s Your N*me? 





7) split(""): 将 字符 串通 过 指定 分 隔 符 


符 存 入 数组 。 语 法 结构 如 下 : 





Performance Application » 


Memory 


Default levels 了 
hbt=151244 
hbt=151244 


983-String.htm13 





83-String.htm13 





图 16-12 String 对象 的 replace() 方 法 效果 


AAA 


分 为 数组 。 只 传 入 " 空 字符 串 时 ， 将 会 把 单个 字 











AR 








空格 





var strl = str.split().join(); // 使 








将 字符 串 拆 为 数组 ， 后 又 通过 空格 将 字符 串 连 接 





主意 的 是 ，JavaScript 的 字符 串 是 不 可 变 的 〈immutable)，String 类 定义 的 方法 都 
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耻 


新 的 字符 串 ， 而 





























不 能 改变 字符 串 的 内 容 。 像 String.toUpperCase() 这 样 的 方法 ， 返 回 的 是 
不 是 修改 原始 字符 串 。 
16.24 Datelj000D 

JavaScript 的 Date 对 象 提供 了 一 种 方式 来 处 理 日 期 和 时 间 。 可 以 使 用 许多 不 同 的 方式 
对 其 进行 实例 化 ， 有 具体 方式 取决 于 人 们 想 要 得 到 的 结果 。 

1. 实例 化 方式 

1) 在 没有 参数 的 情况 下 对 其 进行 实例 化 ， 语 法 结构 如 下 : 


var myDate = new Date(); // 获取 当前 最 新 时 间 


2) 传递 milliseconds 作为 一 个 参数 ， 语 法 结构 如 下 : 





































































































var myDate = new Date(milliseconds); 


3) 将 一 个 日 期 字符 串 作为 一 个 参数 传递 ， 语 法 结构 如 下 : 




















var myDate = new Date(dateString); 


4) 传递 多 个 参数 来 创建 一 个 完整 的 日 期 ， 语 法 结构 如 下 : 











var myDate = new Date(year, month, day, hours, minutes,seconds, milliseconds); 
2. 常用 方法 
Date 对 象 的 方法 有 很 多 种 ， 一 旦 该 对 象 得 到 实例 化 ， 可 以 使 用 这 些 方法 。 大 多 数 可 用 
的 方法 围绕 获取 当前 时 间 的 特定 部 分 ， 见 表 16-1。 




































































表 16-1 日 期 对 象 的 方法 


































































































六 .， 法 说 明 
getFullYear0 获取 年 份 〈4 位 数 形式 ) 
getMonthO 获取 月 份 (0 一 11) 
getDateO 获取 一 月 中 的 某 一 天 (1~31) 
getDayO 获取 一 周 中 的 某 一 天 〈0 一 6) 
getHours() 返回 Date 对 象 的 小 时 (0 一 23) 
getMinutes() 返回 Date 对 象 的 分 钟 《0 一 59) 
getSeconds() 返回 Date 对 象 的 秒 数 (0 一 59) 
getTime() 返回 自 /1/1970 凌晨 0 点 的 毫秒 数 
getTimezoneOffset() 返回 格林 尼 治 标准 时 间 和 本 地 时 间 之 间 的 时 间 差 
将 以 上 方法 在 控制 台 进 行 打印 ， 可 以 发 现 每 个 方法 所 返回 的 值 都 相当 简单 ， 区 别 在 于 所 




















返回 值 的 范围 。 例 如 : 
> getDate(0) 方 法 返回 一 个 月 份 的 天 数 ， 范 围 为 1 一 31。 
> getDay0 方 法 返回 每 周 的 天 数 ， 范 围 为 0 一 6。 
> getHours0 方 法 返回 小 时 数值 ， 范 围 为 0 一 23。 
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> getMillisecondsO 函 数 返回 守 秒 数值 ， 范 围 为 0 一 999。 

> getMinutes0 和 getSeconds0 方 法 返回 一 个 范围 0 一 59。 

> getMonth() 方 法 返回 一 个 0 一 11 之 间 的 月 份 数 值 。 

表 16-1 中 唯一 独特 的 方法 是 getTime0 和 getTimezoneOffset()。getTime0) 方 法 返回 自 
1/1/1970 凌晨 0 点 的 毫秒 数 ， 而 getTimezoneOffset(0 方 法 返回 格林 尼 治 标准 时 间 和 本 地 时 间 
之 间 的 时 间 差 ， 以 分 钟 为 单位 。 

学 习 了 Date 对 象 的 方法 ， 可 以 在 网 页 中 做 一 个 显示 日 期 时 钟 的 实例 。 首 先 在 HIML 中 
做 一 个 id 为 time 的 div， 接 下 来 开始 做 功能 。 代 码 示例 如 下 : 


/HTML 部 分 的 代码 
<div 1d="time"> </div> 
/JavaScript 部 分 的 代码 
function getNewTime(O{ 





























vartimeDiv = document.getElementByld("time"); 

vartoday = new Date(); 

Var year = today.getFull Year(); 

var month = today.getMonth(); 

var datel = today.getDate(); 

varday =today.getDay(O; 

var week =[" 星 期 天 "," 星 期 一 "星期 二 "," 星 期 三 "," 星 期 四 "," 星 期 五 "," 星 期 六 "]; 
Var hours = today.getHours(); 










































































var minutes = today.getMinutes()<10?"0"+today.getMinutes():today.getMinutes(); 

Var Seconds = today.getSeconds()<107"0"+today.getSeconds():today.getSeconds(); 

timeDiv.innerHTML = year+" 人 "+(month+1)+" 卜 "+datel+" 日 
"+week[day]+hours+":"+minutes+":"+seconds; 

// 使 用 setTimeout+ 递 归 实 现时 钟 计 时 

SetTimeout(arguments.callee,1000); 



































} 
window.onload = functionO{ 


getNewTime(); 
} 


代码 运行 效果 如 图 16-13 所 示 。 














2017 年 10 月 10 日 星期 二 9:15:23 


























图 16-13 ”网 页 中 显示 的 时 间 效 果 














16.25 MathlUDOD 


Math 对 象 并 不 像 Date 和 String 是 对 象 的 类 ， 所 以 Math 对 和 象 没有 构造 函数 Math()， 
即 Math 对 象 无 须 在 使 用 之 前 进行 声明 。 例 如 ，Math.sin0 只 是 函数 ， 而 不 是 某 个 对 象 的 方 
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法 。 通 过 把 Math 作为 对 象 使 用 ， 即 可 调用 其 所 有 的 属性 和 方法 。Math 的 属性 和 方法 见 
表 16-2 和 表 16-3。 
使 用 Math 的 属性 和 方法 ， 语 法 结构 如 下 : 

var pi_value=Math.PI; / 圆周 率 PI 的 值 ， 结 果 为 3.141592653589793 

var sqrt_value=Math.sqrt(15); / 15 的 算术 平方 根 ， 结 果 为 3.872983346207417 






































表 16-2 算术 对 象 的 属性 

















































































































属 性 说 明 
E 返回 算术 常量 e， 即 自然 对 数 的 底数 〈 约 等 于 2.718) 
LN2 返回 2 的 自然 对 数 〈 约 等 于 0.693) 
LN10 返回 10 的 自然 对 数 〈 约 等 于 2.302) 
LOG2E 返回 以 2 为 底 的 e 的 对 数 〈 约 等 于 1.442) 
LOG10E 返回 以 10 为 底 的 e 的 对 数 〈 约 等 于 0.434) 
PI 返回 圆周 率 〈 约 等 于 3.14179) 
SQRT2 返回 2 的 算术 平方 根 〈 约 等 于 1.414) 











表 16-3 算术 对 象 的 方法 


































































































方 ” 法 说 明 
ceil(x) 返回 大 于 或 等 于 该 数 的 最 小 整数 

floor(x) 返回 小 于 或 等 于 该 数 的 最 大 整数 

min(x,y) 返回 最 小 值 

max(x,y) 返回 最 大 值 

powWw(X,y) 返回 x 的 y 次 圭 

random() 返回 0~1 的 随机 数 

round(x) 把 数 四 舍 五 入 为 整数 
sqrt(x) 返回 数 的 平方 根 



































算术 对 象 的 方法 还 有 很 多 ， 篇 幅 限制 就 不 再 一 一 列举 ， 有 需要 时 可 以 查阅 帮助 文档 了 解 
使 用 。 






































16.3 javascript 自 定 义 对 象 


在 JavaScript 中 ， 人 们 可 以 定义 自己 的 类 。 目 前 ，JavaScript 中 已 经 存在 一 些 标准 的 类 ， 
如 Date、Array、RegExp、String、Math、Number 等 ， 这 为 编程 提供 了 许多 方便 ， 但 对 于 复 
杂 的 客户 端 程序 而 言 ， 这 些 还 远 远 不 够 。 因 此 ， 需 要 自己 定义 对 每 来 满足 需求 。 


1631 00000 
自 定义 对 象 的 前 提 需 要 知道 对 象 是 什么 ， 对 象 由 什么 组 成 ， 以 及 一 个 对 象 的 属性 和 方法 
是 如 何 声明 的 ， 下 面 一 一 介绍 。 先 来 看 一 段 对 象 声 明 的 代码 ， 语 法 结构 如 下 所 示 : 




























































































Var person = { 
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name : " 张 三 "， 
age : 14, 
say : function() { 
alert(" 我 会 说 话 1 "); 
上 
} 


1. 对 象 

对 象 是 包含 一 系列 无 序 属性 和 方法 的 集合 。 例 如 ， 上 述 代码 就 是 一 个 完整 、 简 洁 的 对 象 
声明 ， 它 声明 了 一 个 person 对 象 ， 这 个 对 象 具 有 name 属性 、age 属性 和 say 方法 。 

2. 键 值 对 

对 象 中 的 数据 是 以 键 值 对 的 形式 存在 的 ， 以 键 取 值 。 例 如 ， 在 给 person 对 象 添加 name 
属性 时 ， 使 用 了 “name:" 张 三"” 语 句 ， 这 条 语句 就 是 一 个 键 值 对 形式 。 其 中 ，name 就 是 它 
的 键 ,“ 张 三 ”就 是 它 的 值 ， 它 们 之 间 使 用 “: ”连接 。 

3. 属性 
述 对 象 特征 的 一 系列 变量 ， 即 对 象 中 的 变量 。 例 如 ， 上 述 代码 中 person 对 象 具有 
name 属性 、age 属性 ， 表 明 这 个 person 对 象 是 一 个 name 为 张 三 ，age 为 14 岁 的 人 。 

4. 方法 
描述 对 象 行为 的 一 系列 方法 ， 即 对 象 中 的 函数 。 例 如 ， 上 述 代码 中 声明 的 person 对 象 除 
了 具有 name 属性 、age 属性 ， 还 具有 一 个 say 方法 ， 表 明 这 个 person 对 象 是 一 个 name 为 张 
三 ，age 为 14 岁 而 且 具 有 语言 能 力 ( 说 话 功 能 ) 的 人 。 


1632 00000 
自 定 义 对 象 的 声明 与 JavaScript 的 内 置 对 象 的 声明 一 样 ， 都 具有 两 种 声明 方式 ， 一 种 是 
字面 量 声明 ， 另 一 种 是 new 关键 字 声 明 。 
1. 字面 量 声明 
对 象 中 的 键 可 以 是 任何 数据 类 型 ， 但 是 一 般 用 作 普 通 变 量 名 不 需要 "") 即 可 。 对 象 中 
的 值 也 可 以 是 任何 数据 类 型 ， 但 是 字符 串 类 型 必须 用 "" 包 事 。 
字面 量 声明 的 基本 语法 结构 如 下 : 














































































































































































































































































































































































































var obj ={ 
keyl: valuel, // obj 属性 
key2: value2， 
func : function(O){ } /obj 方法 





} 


注意 : 多 组 键 值 对 之 间 用 英文 过 号 分 隔 ， 键 值 对 的 键 与 值 之 间 用 英文 冒号 分 隔 。 


2. new 关键 字 声 明 
使 用 new 关键 字 声 明 与 字面 声明 方式 有 区 别 ， 使 用 new 关键 字 声 明 ， 首 先 使 用 new 关 
键 字 实 例 化 一 个 obj 对 象 ， 然 后 使 用 “obj. 属 性 名 = 属性 值 ”的 方式 给 obj 添加 属性 ， 使 用 
“obj. 方 法 名 =function0{}” 的 方式 给 obj 添加 属性 和 方法 。 
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代码 示例 : 


var obj = new Object(); 














obj.name = " 李 四 "; 
obj.say = fonction(){ 
console.log(" 我 是 : "+this.name); 


} 


1633 UUO0OU0OO000D0 


下 面 介绍 在 声明 完成 后 ， 如 何 调 
1. 调用 
对 象 中 的 属性 和 方法 的 调用 有 两 种 方式 。 
(1) 通过 运算 符 〈.) 调用 
在 对 象 内 部 ; 
this. 属 性 名 
this. 方 法 名 0) 























Ni 
























































注意 : 在 对 象 中 直接 写 变 量 名 ， 默 认为 调用 全 局 变量 ， 如 果 需 
须 通 过 this 关键 字 。 


在 对 象 外 部 : 


对 象 名 .属性 名 
对 象 名 .方法 名 0 


代码 示例 如 下 : 








Var person = { 
name : " 张 三 ", 
age : 14, 
say : function(O{ 


alert(" 我 叫 "+this.name+" 今 年 "+this.age+" 了 ! 9;W 对 象 内 部 使 用 this， 调 用 


以 及 删除 声明 的 方法 和 属性 。 





调用 对 象 自身 属性 


则 必 













































































/alertname); / 相当 于 使 用 全 局 变量 name， 而 不 是 使 用 对 象 的 属性 











} 




















console.log(person.name); V/ 在 对 象 外 部 使 用 对 象 名 调用 自身 属性 























Person.say0; // 在 对 象 外 部 使 用 对 象 名 调用 自身 方法 























(2) 通过 ["key"] 调 用 


对 象 名 [" 属 性 名 "] 
对 象 名 [" 方 法 名 "0 















































第 二 种 方式 。 











如 果 key 中 包含 特殊 字符 ， 则 无 法 使 用 第 一 种 方式 ， 必 须 使 | 
代码 示例 如 下 : 
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var person = { 
Name "KS 
age : 14, 
say : function(O{ 
alert(” 我 加 "Hthis.name+" 今 年 "+this.age+" 了 1! "); // 对 象 内 部 使 用 this 调用 自身 属性 








| 
bu 














}， 




















console.log(person["name"]); / 使 用 口 调用 对 象 属性 
person["say"]0; / 使 用 [调用 对 象 方法 


2. 删除 对 象 的 属性 方法 
delete 对 象 名 .属性 /方法 名 ， 语 法 结构 如 下 : 






































delete person.age; // 删除 Person 对 象 的 age 属性 





eT 
Ee 


16.4 章节 案例 : 编写 对 象 实现 班级 成 绩 录 入 


实现 一 个 班级 管理 系统 ， 这 个 系统 其 有 学 员 成 绩 录 入 、 展 示 所 有 学 员 成 绩 、 删 除 学 员 信 
县 等 功能 。 要 求 创建 一 个 对 象 ， 可 以 通过 键盘 输入 一 个 人 员 的 姓名 、 语 文 、 数 学 、 英 语 成 绩 
并 展示 。 控 制 台 打印 输出 效果 如 图 16-14 所 示 。 























丛 

















Elements Console Sources Networ Security 
top Y | Fiter 


杰 瑞 教育 学 生成 绩 管理 系统 
1. 学 员 成 绩 录 入 “2. 展示 所 有 学 员 成 绩 。 3. 删除 学 
录入 成 功 ! 
杰 瑞 教育 17895 班 成 绩 展示 
语文 数学 英语 总 分 
89 78 9 257 




















29 29 19 58 童 节 案例 ;实现 班级 成 线 录 入 
12 20 19 42 童 节 案例 : 实现 班 角 成 线 
19 26 19 40 章节 案例 : 实现 班级 成 绩 录 入 
是 否 继续 (NR 出 ) 童 节 案 例 : 实现 班级 成 线 录 入 
成 功 退 出 ! 感谢 使 用 章节 案例 : 实现 班级 成 绩 录 入 .html? hbt=15; 


> | 


























图 16-14 和 案例 效果 图 





【案例 代码 】 


<!DOCTYPE html> 
<html> 
<body> 
<script type=" text/javascript"> 
!function (){ 
Var classes = { 
className : "1705 班 ", 
studentCountNumber : 27, 
students : [ 
{name:" 张 三 ",chinese:12,maths:20,english:10,sum:42}, 
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{name:" 李 四 


{fname:" 王 二 





]， 


",chinese:10,maths:20,english:10,sum:40}, 
",chinese:20,maths:20,english:10,sum:50}, 


addStudent : functionO{ 
Var name = prompt(" 请 输入 学 员 姓 名 : "); 
var chinese =parseFloat(prompt(" 请 输入 学 员 语 文成 绩 :")); 
var maths =parseFloat(prompt(" 请 输入 学 员 数 学 成 绩 : ")) ; 


A 


var english =parseFloat(prompt(" 请 输入 学 员 英 语 成 绩 : ")); 
var sum = chinese + maths + english; 


var student = { 


name : name, 


chinese : chinese, 


maths : maths, 


english : english, 


Sum : sum 
} 
this.students.push(student); 
上 ， 
showStudent : functionO{ // 展 示 学 生 信 息 


var arr = classes.students; 




















console.log("\ttt 杰 瑞 教育 1705 班 成 绩 展示 "); 


J 9 


console.log(" 序 号 \t 姓名 \t 语文 \ 数学 \ 英语 \t 总 分 "); 
arr.sort(function(a,b){ 


return b.su 


); 


m — a.sum; 


arr.forEach(function(item,index){ 


console.log((index+1)+"\t\t"+item.name+"\t"+item.chinese 


+"\t\t"+item.maths+"\t\t"+item.english+"\t\t"+item.sum); 
); 
}, 
delStudent : function() 


if(this.students.length <= 0){ 

















{ // 删除 学 生 信息 











alert(" 没 

















学 员 信 息 ， 无 法 删除 ! 7 





return; 


} 








Var no = prompt(" 请 输入 要 删除 的 学 员 序 号 :"); 
if(no <1 || no > this.students.length){ 
alert(" 序 号 输入 有 误 ! 请 重新 输入 学 员 序 号 !"); 


return; 


} 

















this.students.splice(no-1,1); 


}， 
} 











console.log("\ttt 杰 瑞 教育 学 生成 绩 管 理 系 统 "); 

















console.log("1. 学 员 成 绩 录 入 \2. 
while(true){ 
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展示 所 有 学 员 成 绩 \t 3. 删 除 学 员 信息 \); 
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var ”sel =parseInt(prompt(" 请 选择 操作 序号 : ")) ; 
switch(sel){ 
case l: 
classes.addStudent(); 
console.log(" 录 入 成 功 ! "); 
classes.showStudent(); 
console.log(" 是 否 继 续 (N 退出 )"); 
break:; 
case 2: 
classes.showStudent(); 
break:; 
Case 3: 
classes.delStudent(); 
console.log(" 删除 成 功 ! )); 
classes.showStudent(); 
console.log(" 是 和 否 继续 IN 退出 )"); 
break; 





} 
var isGo = prompt(" 输 入 N 退出 ， 输 入 其 他 字符 继续 "); 
f(sGo =="N" isGo == "n") { 

console.log(" 成 功 退 出 ! 感谢 使 用 ");return; 


}else continue; 








} 
}0; 
</script> 
</body> 
</html> 
【章节 练习 了】 


1. 数组 的 增删 有 哪些 方法 ? 
2. 写 出 实现 数组 排序 功能 的 函数 。 
3. 写 出 创建 一 个 ajax 请 求 的 步骤 。 
【上 机 练习 】 
1. 有 一 个 有 序 整 数 数组 (2，8，9，18，24，56，62，96)， 要 求 输入 一 个 数字 ， 在 数 















































组 中 查找 是 否 有 这 个 数 。 如 果 有 ， 将 该 数 从 数组 中 删除 ， 要 求 市 除 后 的 数组 仍然 保持 有 序 ; 









































如 果 没 有 ， 则 显示 “数组 中 没有 这 个 数 !1”。 














2. 有 一 个 已 经 排 好 序 的 数组 (1，3，5，7，9)。 现 输入 一 个 数 ， 要 求 按 原来 的 规律 ; 
重 入 数组 中 。 


3. 某 个 公司 采用 公用 电 





中 
蕉 





















































也 











话 传递 数据 ， 数 据 是 四 位 的 整数 ， 在 传递 过 程 中 是 加 密 的 。 加 








密 规 则 是 每 位 数字 都 加 上 5， 然后 用 除 以 10 的 余数 代替 该 数字 ， 再 将 第 一 位 和 第 四 位 交换 ， 














位 和 第 三 位 交换 。 
编写 一 个 程序 ， 









































ie 














于 接收 一 个 四 位 的 整数 ， 并 且 打 印 输出 按 上 述 规 律 加 密 后 的 数 。 
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正则 表达 式 是 网 页 设计 中 常用 的 功能 ， 
的 组 合 ， 可 以 代 指 各 种 可 能 

本 章 学 习 目 标 : 
掌握 正则 表达 式 的 声明 。 
熟悉 正则 表达 式 的 常用 
掌握 正则 表达 的 常用 
掌握 正则 表达 式 的 常用 

正则 表达 式 的 三 -种 模式 和 两 个 验证 函数 ， 
者 可 以 自己 写 出 相应 的 正则 表达 式 进 行 
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17.1 


正则 表达 式 基 础 


正则 表达 式 (Regular Expression〉 是 使 





j 户 输入 内 容 的 规则 验证 。 


javascriptU UDOUDDOD 





性 | 
中 ) 























于 验证 表单 输入 时 的 有 效 性 。i 














的 输入 形式 ， 从 而 对 用 户 输入 的 内 容 进行 验证 。 





需要 大 家 着 重 学 习 理 解 。 通 过 


























用 单个 字符 串 来 描述 、 匹 配 一 系列 符合 菜 个 句法 


















































此 


见 则 的 字符 串 搜索 模 式 。 正 则 表达 式 通常 用 了 
期 等 数据 格式 是 否 正 确 。 使 用 正则 表达 式 可 


进行 验证 ， 减 少 服务 器 的 压力 。 
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正则 表达 式 ， 又 称 规则 表达 式 ， 是 一 种 

系列 符合 某 个 语法 规则 的 字符 串 。 

E 来 体验 一 下 正则 表达 式 的 魅力 。 
varreg = /jretdu/; 


/ + 号 代表 前 面 的 字符 必须 至 少 蝇 


7 A 
全 






















































































配 一 

















月 
了 











8 现 一 








“jreeeeedu 


varreg = /jre?du/; 
/ ?问号 代表 前 面 的 字符 最 多 只 可 以 出 


jredu” 




















29 [2 


“jrdu”、 
var reg = /jre*du/; 
/ * 号 代表 字符 可 以 不 
式 可 以 表示 “jrdu”、“jredu”、“jreeeedu” 


看 完 上 述 代码 ， 是 不 是 觉得 














FE 则 表达 式 
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b 现 ， 也 可 以 出 现 一 次 或 者 多 次 (0 次 、1 次 、 多 次 )， 所 以 这 段 ] 





Em 











Ly 





表单 的 验证 ， 如 了 邮件 地 址 、 电话 号 码 、 日 
以 保证 输入 数据 的 正确 性 并 且 可 以 在 表单 提交 前 























府 
六 















































文本 模式 ， 它 可 以 使 用 述 并 有 


























次 ， 所 以 这 段 ] 





E 则 表达 式 可 以 表示 “jredu”、“jreedu”、 


现 一 次 (0 次 或 1 次 )， 所 以 这 段 正 则 表达 式 可 以 表示 


E 则 表达 





的 功能 强大 了 呢 ? 














j 简 








数学 表达 式 的 方法 一 样 ， 就 是 用 各 种 字符 之 间 的 相互 配合 ， 创 造 出 无 数 种 可 能 的 情况 。 
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单 的 字符 代 指 字符 串 中 可 能 出 现 的 多 种 可 能 。 其 实 ， 构 造 正则 表达 式 的 方法 和 创建 
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在 JavaScript : 
象 ， 另 一 利 























， 声 明 一 个 正则 表达 式 对 象 的 方式 有 两 种 。 一 种 是 直接 声明 RegExp 对 























Fh 是 使 用 字面 量 。 使 用 双 和 斜 杜 VW/)， 就 是 使 用 字面 量 表达 式 的 方式 ， 使 用 new 关键 












































字 ， 就 是 对 象 声 明 方式 ， 两 者 并 没有 本 质 不 同 。 就 像 声 明 一 个 数组 ， 既 可 以 用 new 
Array() ， 
正则 表达 式 的 声明 有 两 种 方式 。 
1) 字面 量 声明 。 基 本 语法 如 下 : 


























也 可 以 使 ) 








一 对 中 括号 [的 方式 。 
































例如 : 





Var reg =/ 表 达 式 主体 /修饰 符 ; 

















var reg =/white/g // 字面 量 声明 











2) new 关键 字 声 明 。 基 本 语法 如 下 : 


:十 二 
) 王 意 : 


Var reg =new RegExp(" 表 达 式 主体 "," 修 饰 符 "); 
例如 : 
Var reg =new RegExp("white","g"); Wnew 关键 字 声 明 









































， 表 达 式 主体 可 以 是 一 个 字符 串 ， 也 可 以 是 正则 表达 式 ， 这 一 部 分 由 两 个 斜 杜 
(/) 包 里 ;修饰 符 是 
区 分 大 小 写 的 











正则 表达 式 主要 包括 两 个 部 分 ， 第 一 部 分 是 定义 的 表达 式 主 体 ， 第 二 部 分 是 正则 
表达 式 的 模式 (g、i、m )。 
甘 i 


PY 



































一 个 可 选 的 字符 串 ， 包 含 属性 g、i 和 m， 分 别 用 于 指定 全 局 匹配 、 











匹配 和 多 行 匹配 。 关 于 正则 表达 式 的 模式 将 在 17.3 节 详 细 讲 解 。 















































\ > mL [oye 
17.2 正则 表达 式 的 常用 字符 
正则 表达 式 主要 由 一 些 普通 字符 和 元 字符 组 成 。 普 通 字符 ， 即 大 小 写字 母 和 数字 ， 元 字 
符 是 具有 特殊 含义 的 字符 。 
172.1 D0O000000000 
表 17-1 中 包含 了 常用 的 元 字符 以 及 它们 在 正则 表达 式 上 下 文中 的 行为 。 
表 17-1 常用 的 元 字符 
元 字 符 说 明 
匹配 除了 换行 符 之 外 的 单个 字符 
\w 匹配 一 个 数字 、 下 画 线 或 字母 字符 ， 等 价 于 [A-Za-z0-9] 
\W 匹配 任何 非 单 字 字 符 ， 等 价 于 [^a-zA-z0-9] 
\d 匹配 一 个 数字 字符 ， 等 价 于 [0-9] 
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( 续 ) 

元 字 符 说 ” 明 

D 匹配 除数 字 之 外 的 任何 字符 ， 等 价 于 [A0-9] 

$s 匹配 任何 空白 字符 

\S 匹配 任何 非 空白 字符 

un 匹配 换行 符 
下 面 举例 学 习 。 
代码 示例 如 下 : 


<script type="text/javascript" > 
var str0 = "_123_jredu"; 
Var RegExp0 = Aw/; // 匹配 一 个 数字 、 下 画 线 或 字母 字符 
varregExp0 = AW/V 匹配 任何 非 单字 字符 ， 即 非 数字 、 下 画 线 或 字母 字符 














WaiestTIEE 2 
varRegExpl = Ad/; // 字符 串 中 有 数字 ， 会 匹配 成 功 
varregExpl =AD/;V 字符 串 中 有 非 数 字 ， 如 字母 ， 会 匹配 成 功 























Wastr2 王 全 和 

var RegExp2 = As/; / 字符 串 中 有 任何 空 字符 串 ， 如 空格 ， 会 匹配 成 功 

Var regExp2 = AS/;V 字符 串 中 有 任何 非 空 字符 串 ， 如 字母 、 数 字 ， 会 匹配 成 功 
</script> 


通过 上 述 代码 举例 ， 对 于 正则 表达 式 中 元 字符 的 意义 与 使 用 应 该 都 有 所 了 解 了 ， 但 是 正 
则 表达 式 中 不 只 有 元 字符 ， 很 多 时 候 需 要 配合 其 他 特殊 字符 的 使 用 。 
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所 谓 特殊 字符 ， 就 是 一 些 有 特殊 含义 的 字符 ， 如 “*txt” 中 的 *， 简 而 言 之 就 是 表示 任 
何 字符 串 的 意思 。 如 果 要 查找 文件 名 中 含有 * 的 文件 ， 则 需要 对 * 进 行 转 义 ， 即 在 其 前 加 一 个 \ 
如 “\*.txt”。 正 则 表达 式 中 有 很 多 特殊 字符 ， 详 见 表 17-2。 













































































表 17-2 特殊 字符 
































^ 匹配 字符 串 的 开始 

$ 匹配 字符 串 的 结束 

| 匹配 选择 字符 中 任意 一 个 ， 如 xly， 可 匹配 x 或 y 
0 分 组 

0 匹配 方 括号 内 的 任意 一 个 字符 

向 | 匹配 不 在 方 括号 内 的 字符 
{x} 匹配 前 一 项 x 次 
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> 太 代 


子 付 ， 








符 蔡 换 另 一 些 









































( 续 ) 
符 ”号 说 明 
{x,} 匹配 前 一 项 x 次 或 者 多 次 
{Xx,y} 匹配 前 一 项 至 少 x 次 ， 但 是 不 能 超过 y 次 
匹配 前 一 项 0 次 或 多 次 ， 等 价 于 {0,} 
十 匹配 前 一 项 1 次 或 多 次 ， 等 价 于 {1,} 
? 匹配 前 一 项 0 次 或 1 次 ， 等 价 于 {0,1} 
下 面 举例 学 习 
代码 示例 如 下 : 
<script type=" text/javascript"> 
var str0 = "jredu 杰 瑞 教育 "; 
var RegExp = 人 杰 瑞 JR$/; /字符 串 中 有 “ 杰 瑞 ”或 者 及 且 以 任意 一 个 开头 ， 会 匹配 成 功 
console.log(RegExp.test(str0)); // false 字符 串 str0 没有 以 " 术 瑞 "开头 ， 匹 配 不 成 功 
var RegExp0 = /jredulJR/; // 字符 串 中 有 jredu 或 者 及， 会 匹配 成 功 
console.log(RegExp0.test(str0)); // true 表示 匹配 成 功 
var Strl = "jredu100"; 
var RegExpl = /(edu)|(100)/; / 字符 串 中 有 edu 或 100, 会 匹配 成 功 
console.log(RegExp1 .test(str1)); // true 
Var str2 = "jredu12345"; 
var RegExp2 = /[jredu]/; // 字符 串 中 有 j、r、e、d、u 中 的 任意 一 个 ， 会 匹配 成 功 
console.log(RegExp2.test(str2)); // true 
Var str3 = "jredujredujredu"; 
var RegExp3 = /Gredu){3,4}/;// 字符 串 中 有 jredu 且 重 复 3 次 或 4 次 ， 会 匹配 成 功 
console.log(RegExp3.test(str3)); // true (redu) 需 要 用 (0 包 庄 起 来 ， 表示 一 个 整体 
Var str4=""; 
Var RegExp4 = /[jredu]*/; // jredu 在 字符 串 中 重复 0 次 或 多 次 ， 会 匹配 成 功 
console.log(RegExp4.test(str4)); // true 
</script> 
17.3 正则 表达 式 的 常用 模式 
正则 表达 式 中 有 三 种 匹配 模型 (g、i、m)， 合 理 地 选择 正确 的 匹配 模式 才能 让 正则 表达 
式 发 挥 出 其 应 有 的 作用 。 为 了 方便 结果 演示 ， 在 接 下 来 的 代码 示例 中 均 使 用 字符 串 的 
replace( 方法 ， 配合 正则 表达 式 的 使 与 效果 对 比 。replace() 方法 用 于 在 字符 串 中 用 一 些 字 



































或 替换 一 个 与 正则 表达 式 匹 配 的 子 串 。 
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正则 表达 式 中 的 匹配 模型 g， 又 称 为 全 局 匹配 ，g 的 作用 是 匹配 串 中 所 有 匹配 的 子 串 。 
不 加 g 的 话 ， 默 认 非 全 局 匹配 ， 上 只 匹配 第 一 个 符合 条 件 的 字符 串 ， 即 如 果 没有 加 g， 找 到 一 
个 匹配 的 之 后 ， 匹 配 就 结束 了 。 

下 面 介绍 g 的 用 法 ， 语 法 结构 如 下 : 






































"www".replace(/W/,"#")——> #ww 
"www".replace(/w/g,"#")——> ##H 


下 面 是 一 段 对 比 代码 。 


<script type="text/javascript"> 
var str = "jredujredu"; 
var newStr = str.replace("e","#"); ”// 普通 replace 功能 ， 只 替换 第 一 个 e 
var newStr0 = str.replace(/e/g,'#"); //”g- 全 局 











console.log(newStr); 
console.log(newStrO); 
</script> 


控制 台 打 印 效果 如 图 17-1 所 示 。 

















Elements Console Sources Network Performance Memory Application » 
vv | Filter Default levels 了 水 


jr#dujredu @1- 常 用 模式 .html? hbt=1512624745654:14 
jr#dujr#du 81- 常 用 模式 .html? hbt=1512624745654:15 








> | 








图 17-1 g 全 局 匹配 效果 


1/32 iDOODOOODOD 
正则 表达 式 中 的 匹配 模型 1， 又 称 为 忽略 大 小 写 匹 配 ，i 的 作用 是 在 匹配 串 与 匹配 的 子 串 
间 不 区 分 大 小 写 地 进行 匹配 。 不 加 i 的 话 ， 默 认 区 分 大 小 写 匹 配 模 式 ， 若 匹配 串 为 小 号， 而 
需要 匹配 的 字符 串 是 大 写 ， 则 匹配 不 成 功 。 
下 面 介绍 i 的 用 法 ， 语 法 结构 如 下 : 
"aAa" .replace(/A/,"#")——> a#a 
"aAa".replace(/A/i,"#")——> #Aa 


下 面 是 一 段 对 比 代 码 。 






































<script type=" text/javascript"> 
var str = "JREDUjredu ; 
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var newStr = str.replace("e","#"); 。”// 注 通 replace 功能， 只 替换 第 一 个 e 
var neWStrl = str.replace(/e/i,"#"); /和 不 区 分 大 小 写 
console.log(newStr); 








console.log(newStr1); 
</script> 


控制 台 打 印 效果 如 图 17-2 所 示 。 








Elements Console Sources Network Performance Memory Application 


top v | Filter Default levels 了 


JREDUjr#du 81- 常 用 模式 .html? hbt=1512624745654:21 
JR#DUjredu gl1- 党 用 模式 .htm13 hbt=1512624745654:22 
| 














图 17-2 i 忽略 大 小 写 匹 配 效果 





1733 m0000 
正则 表达 式 中 的 匹配 模型 m， 又 称 为 多 行 匹配 ， 规 定 正则 表达 式 可 以 执行 多 行 匹配 。m 
的 作用 是 修改 “和 $ 在 正则 表达 式 中 的 作用 ， 让 它们 分 别 表示 行 首 和 行 尾 ， 如 果 采 用 多 行 匹 
配 ， 那 么 每 一 个 行 都 有 一 个 ^ 和 结尾 $。 不 加 mm 的 话 ， 也 就 是 默认 状态 下 ， 一 个 字符 串 无 论 是 
否 换行 都 是 只 有 一 个 开始 ^ 和 结尾 $。 

字符 串 分 多 行 显示 时 ， 除 了 匹配 字符 串 的 开头 和 结尾 外 ， 还 匹配 每 行 的 开头 和 结尾 

下 面 介绍 m 的 用 法 ， 语 法 结构 如 下 












































abc 

abc.replace(/^a/g,"#") ”// 打印 结果 扣 c abc《〈 空 格 表示 换行 ) 
abc 

abc.replace(/^a/gm,"#") ”// 打印 结果 #5c #60c (空格 表示 换行 


下 面 是 一 段 对 比 代 码 。 


<script type=" text/javascript"> 
Var str = jredu 
jredu; / 换行 后 第 二 行 一 定 要 顶 格 写 
var newStr = str.replace("jr","#"); ”// 以 通 字 符 串 ， 只 玲 换 第 一 个 jr 
var newStr0 = str.replace(/^jr/mgi,"#"); //”m- 多 行 匹 配 ， 按 需要 配合 g、i 一 起 使 用 。 匹 配 所 
有 以 if 或 下 开头 的 字符 串 ， 将 它们 替换 为 # 


console.log(newStr); 

















console.log(newStrO); 
</script> 


控制 台 打 印 效果 如 图 17-3 所 示 。 
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Performance Memory ” Application » 


Default levels Y 


8@1- 堂 用 模式 .html1? hbt=1512624745654:29 





81- 常 用 模式 .html? hbt=1512624745654:39 











图 17-3 m 多 行 匹 配 效果 








17.4 正则 表达 式 的 常用 方法 

正则 表达 式 提供 了 test0 和 exec0 两 个 验证 函数 ， 使 用 者 可 以 根据 自己 的 需求 ， 选 择 合适 
的 验证 函数 进行 验证 。 
17.4.1 test() 0 


test0 方 法 用 于 检测 一 个 字符 串 是 否 匹 配 某 个 正则 模式 ， 如 果 需 要 检测 的 字符 串 string 
中 含有 与 RegExpObject 匹配 的 文本 ， 则 返回 true; 否则 返回 false。 
test0 方 法 的 基本 语法 如 下 : 


RegExpObject.test(string) 


代码 示例 如 下 : 




















<script type="text/javascript"> 
var str = "JREDU 杰 瑞 教 育 jredu"; 
Var RegExp = new RegExp(jredu ); 
var result = RegExp.test(str); // 验证 一 个 字符 串 能 否 通过 正则 表达 式 的 匹配 ， 返 回 true 或 














false 
console.log(result); 
</script> 


控制 台 打 印 效果 如 图 17-4 所 示 。 





es Network Performance Memory Application » 


Default levels Y 
82- 常 用 方法 .html? hbt=1512628484158:15 








图 17-4 ”test0 方 法 代码 运行 结果 





17.42 exec() 0 
exec() 方法 是 一 个 通用 的 方法 。 它 的 功能 非常 强大 ， 但 是 它 使 用 起 来 比 test0 方法 以 及 
支持 正则 表达 式 的 String 对 象 的 方法 复杂 。exec() 方 法 用 于 检索 字符 串 中 指定 的 值 ， 返 回 找 
到 的 值 ， 并 确定 其 位 置 ， 返 回 结果 为 数组 。 如 果 未 找到 匹配 ， 则 返回 null。 
exec() 方 法 的 基本 语法 如 下 : 
274 






























































第 17 章 JavaScript 中 的 正则 表达 式 


RegExpObject.exec(string) 


代码 示例 如 下 : 


var str = "Hello,JREDU 杰 瑞 教育 JREDU!"; 
Var RegExp = new RegExp("JREDU","g"); 


var result; 


while ((result = RegExp.exec(st?)) != null) { // 当 匹 配 成 功 时 
console.log(result); 
console.log(RegExp.lastIndex); // 打印 结果 11 


} 


从 图 17-5 中 ， 











可 以 观察 到 exec() 方法 除了 返回 数组 元 素 和 length 属性 之 外 ， 还 返回 





两 个 属性 : index 属性 声明 的 是 匹配 文本 的 第 一 个 字符 的 位 置 ，input 属性 存放 的 是 被 检索 的 
字符 串 string。 控 制 台 打印 效果 如 图 17-5 所 示 。 


民品 


["JREDU", index: 6，input: "HeLLo,JREDU 洒 浪 喜 疡 JREDU!"] 
08: 

















Elements Console Sources Netw 





"JREDU" 


index: 6 
input: “Hello,]REDU 本 瑞 教育 JREDU!” 
length: 1 











982 
(: 15，input: "HeLLo,JREDU 敌 滋 避 所 JREDUI "] 
2 





图 17-5 exec0 方 法 代码 运行 结果 





注意 : 如 果 exec( 找到 了 匹配 的 文本 ， 则 返回 一 个 结果 数组 ; 否则 返回 null。 此 数组 
的 第 0 个 元 素 是 与 正则 表达 式 相 匹配 的 文本 ， 第 一 个 元 素 是 与 RegExpObject 的 第 一 个 子 表 
达 式 相 匹 配 的 文本 ( 如 果 有 的 话 )， 第 二 个 元 素 是 与 RegExpObject 的 第 二 个 子 表 达 式 相 匹 


配 的 文本 ( 如 果 有 
exec() 方 法 使 月 





的 话 )， 以 此 类 推 。 
日 时 主要 分 为 两 种 情况 。 

















1) 在 非 全 局 模式 下 进行 检索 。 
2) 在 全 局 模式 下 进行 检索 。 


两 种 情况 的 区 


别 是 在 全 局 模式 下 ，execO 会 在 正则 对 和 象 的 lastIndex 属性 指定 的 字符 处 开 





始 检索 字符 串 string。 当 exec( 找到 了 与 表达 式 相 匹配 的 文本 时 ， 在 匹配 后 ， 它 将 把 正则 对 
象 的 lastndex 属性 设置 为 匹配 文本 的 最 后 一 个 字符 的 下 一 个 位 置 。 当 exec() 再 也 找 不 到 匹 
配 的 文本 时 ， 它 将 返回 null， 并 把 lastIndex 属性 重 置 为 0。 对 于 非 全 局 模式 ， 只 是 依次 进 
行 检 索 并 将 结果 存 入 数组 。 在 调用 非 全 局 的 RegExp 对 象 的 exec( 方法 时 ， 返 回 的 数组 与 
调用 方法 String.match() 返回 的 数组 是 相同 的 。 

String 对 象 中 有 四 种 支持 正则 表达 式 的 方法 ， 详 见 表 17-3。 
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表 17-3 支持 正则 表达 式 的 String 对 象 的 方法 



























































方 ” 法 说 明 
search 检索 与 正则 表达 式 相 匹配 的 什 
match 找到 一 个 或 多 个 正则 表达 式 的 匹配 
replace 巷 换 与 正则 表达 式 匹配 的 子囊 
split 把 字符 串 分 割 为 字符 串 数组 
下 面 是 一 段 代码 示例 ， 可 以 帮助 我 们 了 解 这 四 种 方法 的 用 法 。 


<script type=" text/javascript"> 
var str = "Hello,JREDU 杰 瑞 教育 JREDU!"; 
console.log(str.search(/JREDU/,str)); 
console.log(strmatch(/ 术 瑞 /,stD); 
console.log(str.replace(/JREDU/, "jredu'")); 
console.log(str.split (JREDU)/)); 

</script> 








控制 台 打印 效果 如 图 17-6 所 示 。 





























图 17-6 String 对 象 中 支持 正则 表达 式 的 方法 代码 运行 结果 





17.5 章节 案例 : 使 用 正则 表达 式 验 证 用 户 注册 表单 
使 用 正则 表达 式 验证 用 户 注册 表单 ， 包 括 用 户 名 、 密 得、 电子 邮箱 以 及 手机 号 碍 。 其 













































































中 ， 用 户 名 只 能 由 英文 字母 和 数字 组 成 ， 长 度 为 4 一 16 个 字符 ， 并 且 以 英文 字母 开头 ; 密码 
只 能 由 鼠 er 长 度 为 4 一 10 个 字符 。 
【案例 代码 】 
<!DOCTYPE html> 
<html> 
<body> 


<form action="" method="post"> 

用 户 名 : ”<input type="text" id="username"> <br /><br /> 

密码 : <input type="password" id="pwd"> <br /><br /> 

电子 邮箱 : <input type="text" id="email"> <br /><br /> 

手机 号 码 : <input type="text" id="tel"> <br /><br /> 
<input type="button" name="" id="btn" value=" 验 证 " /> 

</form> 
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<script type=" text/javascript" > 
window.onload = functionO{ 
var btn = document.getElementById("btn") 
btn.onclick = functionO{ 
var username = document.getElementByld("username").value; 
var pwd = document.getElementByld("pwd").value; 
var email = document.getElementById("email").value; 
Var tel = document.getElementByld("tel").value; 
var regUsername = /A[a-ZA-Z][a-zA-Z0-9]{13,15 }$/; 
var regPwd = /^[a-zA~Z0-9]{4,10}$/; 
var regEmail = /MN\w+@\w+\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?9$/; 
var regTel =/^1[35784]\d{9}9$/; 
if(regUsername.test(username)){ 
alert(" 用 户 名 验证 通过 "); 
}else{ 











alert(" 用 户 名 不 正确 ! "); 
} 
if(regPwd.test(pwd)){ 
alert(" 密 人 码 验证 通过 "); 
}else{ 





alert(" 密 码 不 正确 !"); 
} 


if(regEmail.test(email)){ 

















alert(" 电 子 邮 箱 验 证 通过 "); 
}else{ 
alert(" 电 子 邮箱 不 正确 ! "); 
} 
if(regTel.test(tel)){ 
alert(" 电 话 号 码 验 证 通过 "); 
}else{ 
alert(" 电 话 号 码 不 正确 ! "); 
} 
} 
} 
</script> 
</body> 
</html> 
【章节 练习 】 











1. \w、\W、\d、\D、\s、\D 分 别 表示 什么 意思 ? 
2.，{x}、{x,}、{X,y}、*、+、? 分 别 表示 什么 意思 ? 
3. 正则 表达 式 的 常用 模式 有 哪 三 种 ? 作用 分 别 是 什么 ? 

写 出 验证 身份 证 号 的 正则 表达 式 。 身 份 证 号 〈15 位 或 18 位 数字 ) 最 后 一 位 是 校 验 
位 ， 可 能 为 数字 或 字符 X。 


















































上 
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程序 语言 主要 分 为 三 类 : 面向 机 器 的 汇编 语言 ， 面 向 过 程 的 C 语言 ， 面 向 对 象 的 
C++、Java、PHP 等 。JavaScript 介 于 面向 过 程 与 面向 对 象 之 间 ， 称 为 “基于 对 象 ”的 语言 。 















































本 章 学 习 目 标 : 

> 熟悉 类 与 对 象 的 概念 、 关 系 以 及 声明 。 
> 掌握 四 种 属性 及 其 方法 的 使 用 。 

> 掌握 this 关键 字 的 指向 规律 。 
> 掌握 封装 、 继 承 、 闭 包 的 基本 概念 与 应 用 。 







































































学 习 本 章 后 ， 读 者 将 掌握 封装 、 继 承 、 闭 包 等 面向 对 象 中 重点 概念 的 理解 和 使 用 ， 对 























JavaScript 的 学 习 已 经 进入 深入 阶段 。 


18.1 面向 对 象 编 程 基础 


在 学 习 JavaScript 面向 对 象 编程 之 前 ， 先 来 了 解 面向 过 
特点 。 














过 程 与 面向 对 象 编程 的 概念 与 














面向 过 程 : 专注 于 如 何 解决 一 个 问题 步骤 。 编 程 特 点 是 | 











一 个 个 函数 去 实现 每 一 步 的 过 








程 操作 步骤， 没有 类 和 对 象 的 概念 。 





























中 拿 到 对 象 ， 由 这 个 对 象 去 解决 具体 问题 。 


18.11 00O0000 
面向 对 象 的 思想 是 基于 面向 过 程 的 编程 思想 
































ee 
项 
































面向 对 象 : 专注 于 由 哪 一 个 对 象 来 解决 这 个 问题 。 编 程 特 点 是 出 现 了 一 个 个 的 类 ， 从 类 





。 面 向 过 程 强 调 的 是 每 一 个 功能 的 步骤 ， 而 





面向 对 象 强调 的 是 对 象 ， 然 后 由 对 象 去 调用 功能 。 面 向 对 象 的 思想 是 一 种 更 符合 人 们 思想 习 




















惯 的 思想 ， 可 以 将 复杂 的 事情 简单 化 ， 可 以 将 人 们 从 执行 者 变 成 指挥 者 























例如 : 吃饭 ， 不 同 的 编程 思想 共有 不 同 的 解决 方式 。 























面向 过 程 ; 去 超市 买 菜 一 摘 全 一 洗 菜 一 切 荣 一 炒菜 一 盛 直 





























面向 对 象 : 你 (上 饭店 吃饭 ) 一 服务 员 〈 点 菜 ) 一 厨师 
( 吃 )。 
1. 面向 过 程 
面向 过 程 是 分 析 解 决 问 题 的 步 又， 然后 用 函数 把 这 些 步 又 
时 候 一 一 调用 。 
2. 面向 对 象 


















































忆 来 一 吃 。 


(做 菜 ) 一 服务 员 《〈 端 沫 ) 一 你 











一 步 地 实现 ， 然 后 使 用 的 








面向 对 象 是 把 构成 问题 的 事务 分 解 成 各 个 对 象 ， 而 建立 对 象 的 目的 也 不 是 为 了 完成 一 个 


个 步 又 ， 而 是 为 了 描述 茶 个 事物 在 解决 整个 问题 的 过 程 中 所 发 生 的 行为 。 
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3. 面向 对 象 三 大 特征 
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面向 对 象 有 三 大 特征 : 封装 、 继 承 、 多 态 。 封 装 可 以 隐藏 实现 细节 ， 同 时 包含 私有 成 








员 ， 使 得 代码 模块 化 、 层 次 化 ， 并 提高 安全 性 ;继承 可 以 扩展 已 存在 的 模块 ， 目 的 是 为 了 提 








升 代码 可 重用 性 及 可 维护 性 ， 多 态 是 为 了 降低 类 与 类 之 间 关 联 ， 提 升 程序 的 可 扩展 性 。 














4. JavaScript 属于 基于 对 象 的 语言 

JavaScript 是 基于 面向 对 象 的 语言 ， 不 是 纯 面 向 对 象 的 语言 ， 在 JavaScript 中 所 有 东西 几 
乎 都 是 对 象 。 但 是 ， 它 又 不 是 一 种 真正 的 面向 对 象 编 程 语言 ， 因 为 它 的 语法 中 没有 类 的 概 
态 。 因 此 ，JavaScript 只 能 称 为 基于 对 象 的 语言 。 





念 ， 无 法 实现 多 


1812 000 



































0D 



































类 和 对 象 是 编程 语言 中 两 个 重要 的 概念 。 概 括 来 说 ， 类 是 对 象 的 抽象 ， 对 象 是 类 的 实 


例 化 。 











1. 类 的 概念 








类 是 一 个 























(方法 ) 具体 事物 的 共同 之 处 抽象 出 来 而 形成 。 





以 人 类 为 例 ， 人 都 拥有 上 自己 的 特征 《〈 属 必 















































I 象 的 概念 ， 也 可 以 说 是 一 个 模板 ， 


是 将 一 组 拥有 相同 特征 《属性 ) 和 行为 





E)， 如 喘 高、 体重 、 年 龄 等 ， 也 拥有 自己 的 行 




















为 (方法 )， 如 吃饭 、 呼 吸 、 思 考 、 劳 动 等 ， 将 这 些 相同 之 处 抽象 出 来 ， 形 成 类 的 模型 ， 也 


就 是 人 类 的 概念 。 
2. 对 象 的 概念 
对 象 是 指 类 的 具体 化 ， 实 例 化 ， 是 真实 存在 的 个 体 。 这 个 具体 实例 符合 了 类 的 定义 描 
述 ， 那 么 就 可 以 说 ， 这 个 实例 是 这 个 类 的 一 个 对 象 。 
依然 以 人 类 为 例 ， 张 三 是 从 人 类 中 具体 化 出 的 一 个 个 体 。 他 有 确定 的 特征 〈 属 性 ): 身 





高 180cm， 体 重 


18.13 OO 
























































几 是 符合 人 类 模型 的 事物 ， 会 被 称 为 人 。 






























































90kg， 年 龄 28 岁 ， 可 以 说 张 三 就 是 人 类 的 一 个 对 象 。 


UUDUD 








类 是 对 象 的 抽象 化 模板 )， 对 象 是 类 的 具体 化 (实例 )。 通 俗 地 说 ， 类 是 一 个 抽象 的 概 
同属 性 和 行为 的 集合 ， 但 是 类 仪 仪表 明 这 类 群体 具有 相同 的 属性 ， 没 有 具体 





念 ， 表 示 上 共有 相 


























的 属性 值 ， 而 对 象 是 对 类 的 属 





类 是 一 个 抽 


例如 : 人 类 


































































































































































































生 进 行 上 基体 赋值 后 ， 可 以 得 到 的 一 个 具体 的 个 体 。 
象 的 概念 ， 上 只 能 说 类 有 属性 和 方法 ， 
都 有 姓名 ， 但 不 能 说 人 类 的 姓名 叫 张 三 。 

















但 不 能 给 类 赋 具 体 的 值 。 












































对 象 是 一 个 


例如 : 张 三 是 人 类 的 一 个 个 体 ， 那 么 可 以 翅 

















k 体 的 个 例 ， 是 将 类 中 的 属性 进行 




















k 体 的 赋值 而 来 的 个 体 。 


张 三 这 个 个 体 的 姓名 叫 张 三 。 也 就 是 说 ， 张 三 对 














人 类 的 每 一 个 属性 进行 了 有 具体 的 赋值 ， 那 么 张 三 就 是 由 人 类 产生 的 一 个 对 象 。 
18.1.4 javascript DO0O000000 











在 程序 中 ， 如 果 声 明 一 个 类 ， 如 何 从 类 中 拿 到 





























1. 创建 一 个 类 《构造 函数 ) 























造 方法 。 基 本 语法 如 下 : 


个 具体 的 对 象 ? 











由 于 JavaScript 中 类 的 定义 方法 和 函数 的 定义 方法 一 样 ， 所 以 定义 类 的 同时 就 定义 了 构 
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function 类 名 (属性 名 1) { 
this. 属 性 名 1 = 属性 名 1; 
this. 方 法 名 = functionO{ 


:土产 
) 王 已 : 


function Person(name,sex){ // 类 ， 同 时 定义 构造 方法 


} 


} 









































/ 方法 中 要 调用 自身 属性 ， 必 须 使 用 this. 属 性 名 调用 






































类 名 必须 使 用 帕斯卡 命名 法 ， 即 每 个 单词 首 字母 必须 大 写 。 
代码 示例 如 下 : 





this.eat=functionO{ ”// 类 中 的 方法 
alert("eating"); 


} 


this.name =name; ”// 类 中 的 属性 





this.sex = sex; 


2. 实例 化 (new) 出 一 个 对 象 
通过 类 实例 化 出 一 个 新 的 对 象 ， 实 例 化 对 象 的 时 候 会 执行 构造 函数 。 基 本 语法 如 下 : 


var obj =new 类 名 《属性 1 的 具体 值 ); 


obj. 属 性 名 ;1 调用 属性 
obj. 方 法 0; WU 调用 方法 


:十 二 
壮 忆 : 















































> 通过 类 名 ，new 出 一 个 对 象 的 过 程 ， 称 为 类 的 “实例 化 ”。 

> 类 中 的 this 会 在 实例 化 的 时 候 ， 指 向 新 new 出 的 对 象 ， 所 以 “this. 属 性 名 ”、“this. 方 
法 ”实际 上 是 将 属性 和 方法 绑 定 在 即将 new 出 的 对 象 上 面 。 

> 在 类 内 部 ， 要 调用 自身 属性 ， 必 须 使 用 this. 属 性 名 。 如 果 直 接 使 用 变量 名 ， 则 无 法 
访问 对 应 属性 。 

> 类 名 必须 使 用 帕斯卡 命名 法 ， 注 意 与 普通 函数 进行 区 分 。 


3. 对 象 属性 的 删除 











即 对 象 无 ) 




















在 JavaScript 中 ， 对 象 无 须 手 动 删 除 ，JavaScript 提供 了 一 种 主动 释放 对 象 内 存 的 方法 ， 
Bd 后 >» 


自动 删除 。 基 本 语法 如 下 : 





delete 对 象 名 .属性 名 
代码 示例 如 下 : 
delete zhangSan.name; / 删除 zhangSan 对 象 的 属性 name 


4. 对 象 在 内 存 中 的 存储 方式 
对 象 与 数组 一 样 也 是 引用 数据 类 型 。 也 就 是 说 ， 当 new 上 
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一 个 对 象 时 ， 这 个 对 象 变量 存 
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储 的 实际 上 是 对 象 的 地 址 ， 在 对 象 赋值 时 ， 赋 的 其 实 也 是 地 址 。 
关于 引用 数据 类 型 与 基本 数据 类 型 已 在 16.1.2 节 讲 解 过 。 
代码 示例 如 下 : 

















function Person(O){} 

var zhangsan = new Person0; /zhangsan 对 象 实际 存 的 是 地 址 
varlisi = zhangsan; / 赋值 时 ,实际 是 将 zhangsan 存 的 地 址 给 了 lisi 
lisiname = " 李 四 "; // 李 四 通 过 地 址 ， 修 改 了 name 属性 
console.log(zhangsan.name); / 张 三 再 通过 地 址 打开 对 象 ， 实 际 name 属性 值 已 经 改变 















































18.1.5 constructor [| instanceof 

在 介绍 两 个 属性 之 前 ， 先 来 定义 一 个 类 ， 并 实例 化 出 一 个 对 象 。 后 面 的 例子 将 以 这 段 代 
码 为 基础 。 

代码 示例 如 下 : 







































































function Person(name){ 
this.name = name; // 类 的 属性 
this.say = function0{ } // 类 的 方法 
} 
/ 从 类 中 实例 化 出 一 个 对 象 ， 并 给 对 象 的 属性 赋值 。 


var zhangsan = new Person(" 张 三 "); 


























1。constructor 属性 
当前 对 象 的 构造 函数 。 只 有 对 象 才 有 构造 函数 ， 返 回 的 是 构造 函数 一 一 类 。 例 如 : 


zhangsan.constructor == Person // 这 个 表达 式 的 结果 为 true 








[a 
加 

















注意 : 对 象 的 constructor 属性 储存 于 _proto “原型 对 象 上 (后续 讲解 )。 


2。instanceof 属性 
判断 对 象 是 否 为 某 个 类 的 实例 。 例 如 : 














console.log(zhangsan instanceof Person); // true 
console.log(zhangsan instanceof Object);  //true 
console.log(Person instanceof Object); // true， 函 数 也 属于 对 象 


18.1.6 for-in DOO0DODO 
for-in 循环 是 for 循环 的 一 种 特殊 形式 ， 专 门 用 于 遍历 数组 和 对 象 ， 使 用 起 来 相当 简 
单 。 由 于 数组 使 用 普通 for 循环 遍历 比较 常用 ， 所 以 for-in 循环 常用 于 过 历 对 象 的 属性 。 
for-in 循环 用 于 遍历 对 象 。 语 法 结构 如 下 : 






















































































for (var prop in zhangsan){ 
console.log("zhangsan 的 属性 有 "+ zhangsan [prop]); 








} 
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注意 : 

> 代码 中 的 prop 表示 zhangsan 这 个 对 象 的 每 一 个 键 值 对 的 键 ， 所 以 在 for-in 循环 内 
部 ， 使 用 “zhangsan [prop]” 读 取 每 个 属性 的 值 。 

> 使 用 for-in 循环 ， 不 但 能 遍历 对 象 本 身 的 属性 和 方法 ， 还 能 遍历 对 象 原 型 链 上 的 所 
有 属性 方法 。 原 型 链 的 知识 会 在 后 续 内 容 中 进行 讲解 。 


18.2 成 员 属性 、 静 态 属性 与 私有 属性 


在 JavaScript 中 ， 一 个 类 可 以 拥有 多 种 不 同类 型 的 属性 和 方法 。 在 类 中 使 用 this 声明 的 
称 为 成 员 属 性 ， 在 类 外 部 使 用 类 名 声明 的 称 为 静态 属性 ， 而 在 类 中 使 用 var 声明 的 属性 称 为 
私有 属性 。 每 种 属性 的 使 用 上 又 各 有 不 同 。 


182.1 0UODOODOOOD 
在 构造 函数 中 ， 通 过 “this. 属 性 ”声明 ， 或 者 实例 化 出 对 象 后 ， 通 过 “对 象 .属性 ”追加 
的 ， 都 属于 成 员 属 性 或 成 员 方法 ， 也 叫 实例 属性 与 实例 方法 。 
1. 成 员 属性 
成 员 属性 ， 也 叫 实例 属性 ， 属 于 实例 化 出 的 这 个 对 象 ， 通 过 “对 象 .属性 ”调用 。 基 本 
语法 如 下 : 


alert(zhangsan.name); // 调用 成 员 属性 
2. 成 员 方 法 
成 员 方法 ， 也 叫 实例 方法 
本 语法 如 下 : 


zhangsan.say(); // 调用 成 员 方 法 













































































































































































































































































由 


例 化 出 的 这 个 对 象 ， 通 过 “对 象 .方法 ”调用 。 








也 属于 

















网 


六 


























代码 示例 如 下 : 


function Person(name){ 











this.name =name;// 声明 成 员 属 性 
this.say = functionO{ M/ 声明 成 员 方法 
} 
Var zhangsan = new Person(" 张 三 "); 
zhangsan.age = 14; // 追加 成 员 属性 
alert(zhangsan.name); // 调用 成 员 属性 
zhangsan.say(); // 调用 成 员 方 法 












































1822 0OOUOOO0O0O0000 
通过 “类 名 .属性 名 ”“ 类 名 .方法 名 ”声明 的 变量 ， 称 为 静态 属性 、 静 态 方法 ， 也 叫 类 属 
性 、 类 方法 。 
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1. 静态 属性 
静态 属性 ， 也 叫 类 属性 ， 
语法 结构 如 下 : 





ns 








于 王 
中 现 

















Pau 


function Person(name){} // 声明 一 个 











" 男 "; /1/ 声明 类 属性 
alert(Person.age); // 调用 类 属性 


2. 静态 方法 


静态 方法 ， 也 叫 类 方法 ， 也 是 属于 
语法 结构 如 下 





Person.sex = 



































是 属于 类 
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(构造 函数 ) 的 属性 





al 
[到 





天 


(构造 函数 ) 的 方法 ， 


function Personname){} / 声明 一 个 类 














" 男 "，/ 声明 类 属性 

Person.say = function() { 
alert(“ 我 说 话 了 ! ”); 

}; W 声明 类 方法 

Person.say0;// 调 


Person.sex = 




















类 方法 





) 汪 总 : 


这 里 要 区 分 成 员 属 性 与 类 属性 (静态 属性 )， 


JavaScript 面向 对 象 编程 














.属性 ”调用 。 











请 过 


通过 

















“类 名 .方法 ”调用 。 





成 员 属 性 是 属于 实例 化 出 的 对 象 


的 ， 会 出 现在 新 对 象 的 属性 上 ; 而 类 属性 是 属于 构造 函数 自己 的 ， 不 会 出 现在 新 对 象 的 属 


性 上 。 


代码 示例 如 下 : 


function Person(name){} 











// 声明 类 属性 











WW 声明 二 个 闫 





Person.sex = "为 "; 
var zhangsan = new Person(" 张 三 ");，// new 一 个 对 象 
alert(zhangsan.sex); // 无 法 调用 。 类 属性 只 能 用 类 名 调 ) 











1823 UUO0OU000000 
在 构造 函数 〈 类 





























请 





























function Person(O{ 
var num = 1;/ 私有 属性 

















function func(){} /W 私有 方法 














} 


注意 : 私有 属性 的 作用 域 仅 在 当前 
用 到 。 


代码 示例 如 下 : 


function Person(names){ 


this.name = names; 














基本 语法 如 下 : 


数 有 效 。 


 ， 即 使 用 Person.sex 调用 


巨 / 


) 中 ， 使 用 var 声明 的 变量 ， 称 为 私有 属 
用 function 声明 的 函数 ， 称 为 私有 方法 。 





性 ， 在 构造 函数 〈 类 ) 中 ， 使 


对 外 不 公开 ， 即 通过 对 象 或 类 都 无 法 调 
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Var sex = " 男 "; 


alert(sex); // 私有 属性 只 能 在 类 内 部 使 用 









































} 

alert(Person.sex); // 无 法 调用 
var zhangsan = new Person(" 张 三 "); 
alert(zhangsan.sex); // 无 法 调用 


从 上 述 代码 的 执行 效果 看 ， 私 有 属性 、 私 有 方法 的 作用 域 上 只 在 构造 函数 内 部 有 效 ， 即 只 
能 在 构造 函数 内 部 使 用 ， 在 构造 函数 外 部 ， 无 论 使 用 对 象 名 还 是 类 名 都 无 法 调用 。 






















































































~ 


18.3 ”this 关键 字 


this 关键 字 是 学 习 JavaScript 面向 对 象 的 重要 环节 ， 理 解 this 关键 字 才 能 更 好 地 理解 
JavaScript 中 的 各 种 代码 含义 。 用 一 句 话 概括 ， 在 JavaScript 中 ，this 关键 字 永 远 都 指向 函数 
的 最 终 调用 者 。 


18.3.1 thisD DUODODOD 


this 关键 字 总 是 指向 调用 该 方法 的 对 象 。 但 是 ， 对 于 这 个 调用 者 又 有 什么 基本 要 求 ， 
是 说 这 个 调用 本 身 又 有 什么 规律 呢 ? 

this 的 指向 有 三 个 基本 要 素 : 

1) this 指 疝 的 永远 只 可 能 是 对 象 。 

2) this 指向 谁 ， 永 远 不 取决 于 this 写 在 哪 ， 而 是 取决 于 函数 在 哪 调用 。 

3) this 指向 的 对 象 ， 称 为 函数 的 上 下 文 (context)， 也 叫 函 数 的 调用 者 。 


18.3.2 thisD DUODODOD 


要 研究 this 的 指向 规律 首先 要 牢记 一 句 话 ，this 指向 的 是 函数 的 调用 者 ， 而 不 是 函数 的 
声明 者 。 也 就 是 说 ，this 指向 谁 与 函数 的 调用 方式 奶奶 相关 。 具 体 来 说 ， 可 以 归纳 为 以 下 五 
种 常见 情况 。 

1. 函数 名 0 直接 调用 

通过 函数 名 0 直接 调用 ，this 指向 window 对 象 。 基 本 语法 如 下 : 


function funcO{ ”// 下 面 示例 中 用 到 的 func 函数 都 是 指 的 此 函数 


console.log(this); 

























































































过 






















































































































































































} 
funcO; /Wthis--->window 通过 函数 名 () 调用 的 ，this 永远 指向 window 对 象 


2. 对 象 .函数 名 0 调用 
通过 对 象 .函数 名 0 调用 的 ，this 指向 这 个 对 象 。 基 本 语法 如 下 : 
var obj ={ // 狭义 对 象 


name:"ob]j", 
funcl :func 
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obj.func10; VW this 一 ->obj 






































代码 解释 : 将 func 函数 名 当 作 obj 对 象 的 一 个 方法 ， 然 后 使 用 对 象 名 .方法 名 调用 ， 这 
个 时 候 函 数 里 面 的 this 指向 obj 对 象 。 
document.getElementByld("div").onclick = functionO{ // 广义 对 象 
this.style.backgroundColor = "red"; 
| Wy 
代码 解释 : 对 象 的 调用 还 有 一 种 情况 ， 就 是 使 用 getElementById 取 到 一 个 div 控件 ， 是 
































一 种 广义 的 对 象 ， 使 用 它 调用 函数 ， 则 函数 中 的 this 指向 这 个 div 对 象 。 
3. 数组 下 标 调 用 
函数 作为 数组 的 一 个 元 素 ， 通 过 数组 下 标 调用 的 ，this 指向 这 个 数组 。 基 本 语法 如 下 : 
































var arr = [func,1,2,3]; 
arr[0]0; / this———>arr 


4. 回调 函数 调用 
函数 作为 window 内 置 函 数 的 回调 函数 调用 ，this 指向 window， 如 setInterval、 
setTimeout 等 回调 函数 。 基 本 语法 如 下 : 





















































setTimeout(func,1000); /this 一 ->window 


S。nevw 关键 字 调 用 
孙 数 作为 构造 函数 ， 用 new 关键 字 调 


var obj =new func(); /this---> 新 new 出 的 obj 



































时 ，this 指向 新 new 出 的 对 象 。 基 本 语法 如 下 : 





























18.33 thisD D000 
下 面 举 例 学 习 。 代 码 示例 如 下 : 


<script type=" text/javascript"> 
var fullname = 'John Doe'; 
Var obj={ 
fullname: 'Colin Ihrig', 
prop: { 
fullname: 'Aurelio De Rosa, 
getFullname: function() { 
return this.fullname; 
b 
} 
所 
console.log(obj.prop.getFullname()); / 函数 的 最 终 调用 者 obj.prop 
var test = obj.prop.getFullname; 
console.log(test()); / 函数 的 最 终 调用 者 test() this-> window 


























obj.func = obj.prop.getFullname; / 给 obj 追加 方法 
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console.log(obj.funcO);/ 函数 最 终 调用 者 是 obj 

var arr = [obj.prop.getFullname, 1,2]; 

arrfullname = "JREDU"; 

console.log(arr[0]0); / 函数 最 终 调用 者 数组 
</script> 


控制 台 打 印 结果 如 图 18-1 所 示 。 




















[x [ol Elements Console Sources Network Performance Memory Application » 


top v | Filter Default levels 了 


Aurelio De Rosa 93-this . ?hbt=151254， 





John Doe 





Colin Ihrig 
JREDU 








> 





图 18-1 this 指向 练习 题 


18.4 ”原型 与 原型 链 


原型 与 原型 链 是 JavaScript 中 最 重要 的 一 个 环节 。 可 以 说 理解 了 原型 与 原型 链 的 思想 ， 
才能 够 算是 真正 学 会 了 JavaScript。 首先 ， 需 要 理解 什么 是 _proto 和 prototype。 而 一 个 对 
象 的 _proto ”的 最 终 指 向 ， 就 是 这 个 对 象 的 原型 链 。 


18.41 _proto [0 prototype 


在 学 习 原 型 与 原型 链 之 前 ， 首 先 来 了 解 两 个 基本 概念 。 

1，prototype 〈 函 数 的 原型 ) 

函数 才 有 prototype 。prototype 是 一 个 对 象 ， 指 向 了 当前 构造 函数 的 引用 地 址 。 通 过 
prototype 可 以 为 对 象 在 运行 期 间 添加 新 的 属性 和 方法 。 

2，_proto _〔 对 象 的 原型 对 象 ) 

所 有 对 和 象 都 要 _proto_ 属性 (这 里 的 对 象 除 了 人 们 理解 的 狭义 对 象 ， 也 包括 函数 、 数 组 
等 对 象 )。 当 用 构造 函数 实例 化 Cnew) 一 个 对 象 时 ， 会 将 新 对 象 的 _proto “属性 指 在 构造 
函数 的 prototype。 

代码 示例 如 下 : 

































































function Person(O){} 
Var zhangsan = new Person(); 
console.log(zhangsan. proto “== Person.prototype); // true 


上 例 中 使 用 函数 Person，new 出 了 一 个 对 象 zhangsan， 那 么 对 象 zhangsan 的 _proto ”就 
等 于 函数 Person 的 prototype。 
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18.42 DODDO 

对 和 象 的 _proto_ 指向 了 函数 的 prototype， 函 数 的 prototype 本 身 也 是 个 对 象 ， 是 对 象 就 
肯定 有 _proto  ， 那 函数 的 、proto “又 指向 了 谁 ? 顺 着 这 样 的 思路 ， 可 以 沿 着 一 个 对 象 
_ proto “向 上 和 查找 ， 由 这 种 原型 层 层 连接 起 来 的 结构 就 构成 了 原型 链 。 

以 下 面 的 代码 为 例 ， 原 型 链 的 示意 图 如 图 18-2 所 示 。 





该 





[E 
























































function PersonO{} 
var zhangsan = new Person(); 


new Persom( ) 


zhangsan 













Person( ) Person.prototype 





Function.prototype 









Object.prototype NULL 


图 18-2 原型 链 的 示意 菇 

















图 18-2 可 以 得 出 原型 链 的 指向 规则 。 总 结 如 下 : 























1) 通过 构造 函数 new 出 的 对 象 ， 新 对 象 的 _proto “指向 构造 函数 的 prototype。 


2) 所 有 函数 的 _proto 


指向 function() 的 prototype。 








3) 非 构 造 函 数 new 出 的 对 象 的 _proto ”指向 Object 的 prototype。 
4) ObjectO 的 prototype 的 _proto_ 指向 null。 
5) 所 有 对 象 最 终 都 会 指向 ObjectO 的 prototype。 


1843 UUO0OU00000 



































原型 属性 和 原型 方法 是 写 在 构造 函数 的 prototype 上 。 当 使 用 构造 函数 实例 化 对 象 时 ， 


习惯 上 将 属性 写 为 成 员 属性 ， 而 方法 写 为 原型 方法 。 





























属性 方法 会 进入 新 对 象 的 _proto 上。 基本 语法 如 下 : 


Person.prototype.name = ""; 
Person.prototype.func = functionO{ }; 


























代码 示例 如 下 : 


function PersonO{ 
this.name = "zhangsan"; 


} 
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Person.prototype.Say = function(O){} 


会 有 这 种 习惯 的 三 个 原因 总 结 如 下 ; 

1) 方法 写 在 prototype 上 ， 将 更 加 节省 内 存 。 

2) 原型 属性 在 定义 后 不 能 改变 ， 无 法 在 实例 化 时 进行 赋值 ， 所 以 属性 
性 。 但 是 对 于 方法 ， 写 完 后 基本 不 用 改变 ， We 

3) 实例 化 出 对 象 后 ， 属 性 全 在 对 象 上 ， 方 法 全 在 原型 上 ， 结 构 清晰 。 

代码 示例 如 下 : 




































































el 
ai 
Ee 
"和 





原型 属 


















































<script type=" text/javascript"> 
function Person( name,age ){ 
this.name = name; 成 员 属 性 
this.age= 15; /1/ 给 age 赋 默 认 值 
varnum =1; / 私有 属性 〈 无 法 访问 ， 只 能 在 内 部 显示 ) 





| 











rr 





} 
Person.count = "60 亿 "; /1/ 静态 属性 














Person.prototype.say = function0{ // 原型 方法 
console.log(" 我 可 以 说 话 卫 "); 
}; 


var zhangsan = new Person(" 张 三 "); 


console.log(zhangsan); 





console.log(zhangsan.age); // 打印 结果 15 
console.log(zhangsan. proto .say()); // 打印 结果 我 可 以 说 话 了 
</script> 








上 述 代码 就 是 按照 习惯 来 写 的 ， 可 以 从 控制 台 的 打印 效果 中 看 出 ，Person 类 的 属性 和 方 
法 很 清晰 地 就 可 以 分 辨 出 来 ， 而 且 属 性 在 进行 重新 手动 赋值 的 时 候 ， 也 不 会 出 现任 何 问题 。 
控制 台 打 印 效 果 如 图 18-3 所 示 。 









































twork ”Performance Memory Application 少 


Default levels Y 
893- 原型 司 性 和 原型 方法 .html? hbt=1512527793825:33 











图 18-3 ”原型 属性 和 原型 方法 
4) 使 用 for-in 遍历 对 象 时 ， 会 将 属性 和 方法 全 部 打印 出 来 ， 而 方法 往往 不 用 显示 HH 
来 ， 那 么 方法 写 在 原型 上 ， 就 可 以 使 用 hasOwnProperty 方法 将 原型 方法 过 滤 掉 。 


注意 : 可 以 使 用 hasOwnProperty 方法 来 判断 一 个 属性 是 否 是 对 象 自身 的 属性 ， 和 for-in 
中 的 in 运算 符 不 同 ， 该 方法 会 忽略 掉 那 些 从 原型 链 上 继承 到 的 属性 。 基 本 语法 如 下 
































三 














zhangsan.hasOwnProperty(ame) == true; / 结果 为 true 
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这 个 结果 表示 name 是 zhangsan 这 个 对 象 自 身 的 一 个 属性 。 因 而 可 以 使 用 
hasOwnProperty 方法 来 将 对 和 象 的 原型 方法 过 滤 掉 。 
代码 示例 如 下 : 


// for-in 遍历 对 象 属性 
var obj = {"name":" 张 三 ","age":15,"sex":" 男 "}; // 定义 一 个 object 对 象 
function allpro(obj){ 

Var keys=[]; 





























var values=[]; 
for(var key in obj){ 
if (obj.hasOwnProperty(key) === true){ // 使 用 hasOwnProperty， 只 遍历 对 象 自身 的 
属性 ， 而 不 包含 继承 于 原型 链 上 的 属性 
keys.push(key); 























values.push(obj[key]); 
} 
} 
console.log(" 键 : "+keys+" 值 : "+values); 
} 
Object.prototype.bar = 1; // 修改 Object.prototype 
allpro(o);) // 调用 函数 


控制 台 打印 效果 如 图 18-4 所 示 。 





























图 18-4 for-in 遍历 对 象 属性 

当 访 问 对 象 的 属性 或 方法 时 ， 会 优先 使 用 对 象 自 有 的 属性 和 方法 。 如 果 没 有 找到 ， 就 使 
用 _proto_ 属 性 在 原型 上 查找 ， 如 果 找 到 即 可 使 用 。 如 果 对 每 自 身 及 _proto 上 有 同名 方 
法 ， 则 会 执行 对 象 自身 的 。 















































土 十 站 证 
18.5 封装 


封装 是 面向 对 象 三 大 特征 之 一 ， 指 隐藏 对 象 的 属性 和 实现 细节 ， 仅 对 外 提供 公共 访问 方式 。 
封装 原则 是 将 不 需要 对 外 提供 的 内 容 都 隐藏 起 来 ， 把 属性 都 隐藏 ， 只 提供 公共 方法 对 其 访问 。 


1821 OU00000 
封装 是 面向 对 象 中 一 个 最 简单 的 概念 ， 就 是 将 内 部 的 实现 细节 隐藏 ， 对 外 只 提供 统一 的 
接口 ， 让 调用 者 通过 提供 的 接口 调用 ， 而 不 需要 关心 内 部 的 实现 细节 。 
根据 这 个 思想 ， 将 属性 和 方法 封装 成 一 个 类 ， 并 通过 类 名 拿 到 对 象 ， 这 本 身 就 是 封装 
(类 的 封装 ); 而 将 一 段 段 重复 使 用 的 代码 ， 封 装 成 一 个 个 方法 ， 这 其 实 也 是 封装 〈 方 法 的 
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封装 )。 
类 中 的 方法 封装 以 后 ， 类 里 面 的 属性 没有 加 以 控制 ， 使 用 者 可 以 随意 对 属性 进行 操作 。 
例如 ， 对 于 “性 别 ” 这 个 属性 ， 只 能 被 赋值 为 “ 男 ” 或 “ 女 ” 如 果 不 加 以 控制 ， 则 调用 者 
可 以 随意 进行 赋值 。 因 此 ， 需 要 对 类 中 的 属性 进行 进一步 的 封装 。 

属性 的 封装 就 是 将 类 中 的 属性 进行 私有 化 处 理 ， 对 外 不 能 直接 使 用 对 和 象 名 访问 (私有 属 
性 )， 同 时 需要 提供 专门 用 于 设置 和 读 取 私 有 属性 的 set/get 方法 ， 让 外 部 使 用 人 们 提供 的 方 
法 对 属性 进行 操作 。 


18.5.2 JavaScriptU DODO0ODOD 


下 面 通 过 一 个 实例 来 巩固 一 下 刚才 学 习 的 概念 性 知识 ， 更 切实 地 了 解 封装 是 如 何 声 明 ， 
又 是 如 何 调用 的 。JavaScript 模拟 实现 封装 的 具体 实例 如 下 所 示 。 






































































































































<script type=" text/javascript"> 
function Person( name,agel ){ 
this.name = name; 
var age = 0;// 私有 属性 
this.setAge = function( ages ){ 
if( ages>0 && ages<=120){ 








age = ages; 

}else{ 
console.log(" 年 龄 赋值 失败 "); 

} 

} 

this.getAge =functionO{ 
return age; 

} 








// 当 实 例 化 类 拿 到 对 象 时 ， 可 以 直接 通过 类 名 的 (agel ) 传 入 年 龄 ， 设 置 私有 属性 
if(agel != undefined ) this.setAge( agel ); 




















} 

var lisi = new Person(" 李 四 ",99); 

lisi.setAge(999); /999 不 合法 ，999 赋值 失败 ， 因 而 99 生效 

console.log(" 李 四 的 年 龄 "+lisi.getAge0);// 打印 返回 的 私有 属性 值 
</script> 


控制 台 打印 效果 如 图 18-5 所 示 。 























[x | Elements Cons Sources Network Performance Memory Application » 


© top Filter Default levels Y 
年 龄 哑 值 失败 82-Js 模 所 封装 .html? hbt=1512 
李 四 的 年 龄 99 82-]s 模 拟 封 装 .html1? hbt=1512 


> 














图 18-5 JavaScript 模拟 实现 封装 
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18.6 ”继承 


于 JavaScript 是 基于 对 象 的 ， 它 没有 类 的 概念 ， 所 以 ， 要 想 实 现 继承 ， 需 要 模拟 实 
现 。 有 三 种 常用 的 方法 可 以 实现 ， 分 别 是 : 扩展 Object 的 prototype 实现 继承 ， 使 用 call 和 
apply 实现 继承 和 使 用 原型 实现 继承 。 


1861 0U000000 
使 用 一 个 子 类 继承 另 一 个 父 类 ， 子 类 可 以 自动 拥有 父 类 的 属性 和 方法 。 继 承 的 两 方 发 生 
在 两 个 类 之 间 ， 所 以 继承 其 实 就 是 让 子 类 拥有 父 类 的 所 有 属性 和 方法 。 

1. 继承 
使 用 一 个 子 类 继承 另 一 个 父 类 ， 那 么 子 类 可 以 自动 拥有 父 类 的 所 有 属性 和 方法 ， 继 承 的 
两 方 发 生 在 两 个 类 之 间 。 

2. 实现 继承 的 方法 

本 书 中 提供 了 三 种 JavaScript 实现 继承 的 方式 。 现 在 简单 介绍 这 三 种 方式 实现 继承 的 
原理 。 

(1) 扩展 Object 的 prototype 实现 继承 

实现 继承 的 原理 : 通过 循环 ， 将 父 类 对 象 的 所 有 属性 和 方法 ， 全 部 赋 给 子 类 对 象 。 关 键 
点 在 于 for-in 循环 ， 即 使 不 扩展 Object， 也 能 通过 简单 的 循环 实现 操作 。 

(2) 使 用 原型 实现 继承 

实现 继承 的 原理 : 将 父 类 对 象 赋值 给 子 类 的 prototype， 那 么 父 类 对 象 的 属性 和 方法 就 会 
出 现在 子 类 的 prototype 中 。 那 么 实例 化 时 ， 子 类 的 prototype 又 会 到 子 类 对 象 的 _proto 
中 ， 最 终 父 类 对 和 象 的 属性 和 方法 会 出 现在 子 类 对 和 象 的 _proto_ 中。 

(3) 使 用 call 和 apply 实现 继承 

实现 继承 的 原理 : 定义 子 类 时 ， 在 子 类 中 使 用 三 个 函数 调用 父 类 ， 将 父 类 函数 的 this 指 
向 为 子 类 函数 的 this。 

简单 了 解 这 三 种 实现 继承 方式 的 原理 后 ， 下 面 介 绍 这 3 种 方式 实现 继承 的 具体 步骤 。 


18.62 00 obiecD0 protctypeU DO DD 


扩展 Object 实现 继承 的 本 质 是 自己 写 了 一 个 方法 ， 将 父 类 的 所 有 属性 和 方法 通过 遍历 循 
环 ， 逐 个 复制 给 子 类 。 具 体 的 实现 步骤 如 下 。 
(1) 声明 父 类 








































































































































































































































































































































































































function ParentO{} 
(2) 声明 子 类 


funtion ChildO){ } 




















(3) 通过 原型 给 Object 对 象 添加 一 个 扩展 方法 
Object.prototype.customExtend = function(parObj){ 
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for(vari in parObj){ // 通过 for-in 循环 ， 把 父 类 的 所 有 属性 方法 ， 赋 值 给 子 类 
this[i] = parObj[i]; 
} 
} 


(4) 子 类 对 象 调用 扩展 方法 




















Child.customExtend(Parent); 














下 面 来 看 一 个 例子 加 深 理 解 。 代 码 示 例如 下 : 





<script type=" text/javascript"> 
function Person( name,age ){ // 定义 父 类 
this.name = name ; 
this.age = age; 
this.say = function( ){ 
alert(" 我 叫 "+this.name); 





} 
} 
function Student( no ){ // 定义 子 类 
this.no = no; 
this.study = functionO{ 
alert(" 我 在 学 习 "); 
} 
} 

















Object.prototype.customExtend = function( parent ){ // 通过 原型 给 Object 对 象 添加 一 个 扩展 方 


法 ， 名 字 为 customExtend 
for( variin parent ){ // 通过 for-in 循环 ， 把 父 类 的 所 有 属性 方法 ， 赋 值 给 子 类 


this[i] = parent[i]; 











} 
} 


var p = new Person(" 张 三 ",12); 
var s= new Student("2017001"); 
s.customExtend (p); 

s.say(); // 弹 窗 显示 “我 叫 张 三 ” 
console.log(s ); V/ 现在 s 继承 了 p 的 所 有 属性 和 方法 


</script> 


























控制 台 打 印 效果 如 图 18-6 所 示 。 








































































































从 图 18-6 中 可 以 看 出 ， 子 类 Student 已 经 继承 了 父 类 Person 的 所 有 方法 和 属性 ， 说 明 
扩展 Object 的 prototype 的 方式 可 以 实现 继承 。 但 是 ， 这 种 方式 存在 两 个 缺点 : 

1) 无 法 通过 一 次 实例 化 直接 得 到 完整 子 类 对 象 ， 而 需要 先 取 到 子 类 和 父 类 对 象 ， 再 手 
动 合并 。 

2) 扩展 Object 的 继承 方法 会 保留 在 子 类 对 象 上 。 
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本 


[x S Networ Performance Memory Application » 


Default levels 了 





v Student 82- 扩 展 objiect 实 现 绯 承 .htm1? hbt=1512548165696: 37 
age: 12 
j> CUstomExtend: £ ( porent ) 
name: " 张 三 " 
no: "29170991” 
psay: fF() 
pstudy: £ () 











图 18-6 forin 循环 扩展 Object 的 prototype 


18.63 0UOO0OODOOD 
使 用 原型 实现 继承 是 比较 简单 而 且 比较 好 理解 的 一 种 ， 就 是 将 子 类 的 prototype 指向 父 
类 的 对 象 就 可 以 了 。 有 只 体 的 实现 步骤 如 下 。 

(1) 声明 父 类 。 





























function ParentO{ } 

(2) 声明 子 类 。 
function Child O{} 

(3) 把 在 子 类 对 象 的 原型 对 象 声 明 为 父 类 的 实例 。 
Child.prototype = new Parent(); 


下 面 来 看 一 个 例子 加 深 理解 。 代 码 示 例如 下 : 





function Person( name,age ){ 
this.name = name ; 


this.age = age; 


this.say =function(){ ”// 传 参 
alert(" 我 叫 "+this.name); 
} 


function Student( no ){ 
this.no = no; 
this.study = function(){ 
alert(" 我 在 学 习 "); 
} 
} 


Student.prototype = new Person( " 张 三 ",14 );// 子 类 prototype 指向 父 类 对 象 
Var s = new Student(12); 
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的 所 有 





stu.say(); /WU 弹 窗 显示 “我 叫 张 三 ” 
console.log(s );/ 继承 后 ， 子 类 获得 了 父 类 的 全 部 属性 方法 


控制 台 打 印 效 果 如 图 18-7 所 示 。 








Elements Console Sources Network Performanc 


v Student 
no: 12 
> study: 地 
,A 
age: 14 


name: 
Say: f ) 
oto__: Object 


> 
> 


从 图 18-7 中 可 以 看 











1) 子 类 自身 的 所 











e Memory Application » 


v | Filter Default levels 了 


84- 原 型 实现 继承 .html1? hbt=1512542436823:29 





() 


oto__: Person 


“ 张 三 " 




















图 18-7 ”使 用 原型 指向 父 类 对 象 


上 ， 子 类 Student 继承 了 父 类 Person 的 所 有 属性 和 方法 ， 但 是 父 类 
属性 和 方法 都 继承 在 子 类 Student 的 _proto_ 中。 
使 用 原型 继承 有 以 下 两 个 特点 : 











有 属性 都 是 成 员 属性 ， 父 类 继承 过 来 的 属性 都 是 原型 属性 。 





2) 依然 无 法 通过 一 步 实例 化 拿 到 完整 的 子 类 对 象 。 














18.64 00O cal0 apply0 000 


作 月 





类 的 this 上 。 


2 

















日 是 通过 函数 名 调用 








在 学 习 使 用 call 和 apply 实现 继承 之 前 ， 先 了 解 一 下 call 和 apply 的 作用 。 它 们 的 主要 
方法 ， 强 行将 函数 中 的 this 指向 某 个 对 象 。 基 本 语法 如 下 : 





call 写法 : func.call(func 的 this 指向 的 obj, 参 数 1, 参 数 2...); 
apply 写法 : func.apply(func 的 this 指向 的 obj,[ 参 数 1, 参 数 2...】); 





注意 : call 与 apply 的 唯一 区 别 是 接收 func 函数 的 参数 方式 不 同 。call 采用 直接 写 多 个 
参数 的 方式 ， 而 apply 采用 的 是 一 个 数组 封装 所 有 参数 。 














(1) 声明 父 类 
funtion Parent() 


(2) 声明 子 类 


使 用 这 两 个 函数 实现 继承 的 思路 ， 就 是 在 子 类 | 
父 类 的 this 强行 绑 定 为 子 类 的 this。 
具体 的 实现 步骤 如 下 。 

















{} 


function Child O{} 


(3) 在 子 类 中 通过 call 方法 或 者 apply 方法 去 调用 父 


function Child |{ 


94 











bh 使 用 父 类 函数 调用 call 或 apply， 并 将 





这 样 ， 父 类 绑 定 在 this 上 的 属性 和 方法 就 可 以 绑 定 到 子 





并 
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Parent.call(this,….); // 将 父 类 函数 中 的 this 强行 绑 定 为 子 类 的 this 
| 


下 面 来 看 一 个 例子 加 深 理解 。 代 码 示例 如 下 : 





<script type=" text/javascript"> 
function Person(name,age){ 
this.name = name; 
this.age = age; 
this.say = function(){ 
alert(" 我 叫 "+this.name); 
} 
} 
function Student(no,name,age){ 
this.no = no; 
this.study = function(O){ 
alert(" 我 在 学 习 !! "); 





} 
Person.call(this,name,age); /#* 执 行 上 述 代 码 ， 相 当 于 把 Person 类 所 有 this 替换 为 Student 
类 this。 换 言 之 ， 也 就 是 把 Person 类 所 有 属性 和 方法 全 给 了 Student 类 */ 
} 
var s = new Student(13," 张 三 ",12); 
console.log(s); // 子 类 继承 了 父 类 say 方法 
</script> 


控制 台 打印 效果 如 图 18-8 所 示 。 





























Performance Memory Application 
Default levels 了 


83-call 、apply 实 现 绯 承 .htm12? hbt=1512541182559:25 
idy: f, say: f} 





tor: £f Student(no, name, age) 


oto__: Object 

















图 18-8 使 用 call 和 apply 改变 this 指向 


从 图 18-8 中 可 以 看 出 ， 子 类 Student 已 经 继承 了 父 类 Person 的 所 有 方法 和 属性 ， 说 明 
call、apply 方式 可 以 实现 继承 ， 而 且 这 种 方法 可 以 通过 一 步 实例 化 得 到 完整 的 子 类 对 象 。 























18.7 JavaScript 中 的 闭 包 


“ 闭 包 ”一 词 来 源 于 以 下 两 者 的 结合 ， 一 是 要 执行 的 代码 块 ， 即 由 于 上 自由 变量 被 包含 在 
代码 块 中 ， 这 些 自由 变量 以 及 它们 引用 的 对 象 没有 被 释放 ;， 二 是 为 自由 变量 提供 绑 定 的 计算 
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环境 ， 即 作用 域 。 


18.7.1 DOOOO0OD0D 

要 理解 闭 包 的 概念 ， 首 先 必须 理解 JavaScript 的 变量 作用 域 。 在 JavaScript 中 没有 块 级 
作用 域 ， 只 有 函数 作用 域 。 也 就 是 说 ，for、if 等 有 {} 的 结构 体 并 不 具备 自己 的 作用 域 。 变 量 
的 作用 域 有 两 种 : 全 局 变量 和 局 部 变量 。 

1. 全 局 变量 

JavaScript 语言 的 特殊 之 处 ， 就 在 于 函数 内 部 可 以 直接 读 取 全 局 变量 。 代 码 示例 如 下 : 












































































































































var num=10; 
function funcO{ 
console.log(num); 


} 
funcO; // 10 
2. 局 部 变量 
在 函数 外 部 无 法 读 取 函 数 内 的 局 部 变量 。 代 码 示例 如 下 : 

















function funcO{ 
var num=10; 


} 


console.log(num); // error: num is not defined 


注意 : 函数 内 部 声明 局 部 变量 的 时 候 ， 要 使 用 var 声明 。 如 果 不 用 var 声明 变量 ， 实 际 
上 是 声明 了 一 个 全 局 变量 。 代 码 示例 如 下 : 


function funcO{ 
num=10; 

} 

funcO; 

console.log(num); // 10 




















因为 函数 内 部 的 变量 在 函数 执行 








函数 外 部 不 能 访问 函数 内 部 的 局 部 变量 (私有 属性 ) 
完 后 就 会 被 释放 掉 。 

3. 闭 包 的 概念 

闭 包 就 是 能 够 读 取 其 他 函数 内 部 变量 的 函数 。 由 于 在 JavaScript 中 ， 只 有 函数 内 部 的 子 
函数 才能 读 取 局 部 变量 ， 所 以 可 以 把 闭 包 简 单 理解 成 “定义 在 一 个 函数 内 部 的 函数 ”。 因 
此 ， 在 本 质 上 ， 闭 包 就 是 将 函数 内 部 和 函数 外 部 连接 起 来 的 一 座 桥 梁 。 
18.7.2 D0D000 

闭 包 可 以 用 在 许多 地 方 ， 通 常会 跟 很 多 东西 混搭 起 来 。 闭 包 的 最 大 用 处 有 两 个 : 

1) 可 以 在 函数 外 部 访问 函数 的 私有 变量 。 

2) 可 以 让 函数 内 部 的 变量 保存 在 内 存 中 ， 不 会 在 函数 调用 完成 后 立即 释放 。 一 个 是 前 
面 提 到 的 可 以 读 取 函数 内 部 的 变量 ， 男 一 个 就 是 让 这 些 变量 的 值 始 终 保持 在 内 存 中 。 
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注意 : 

> 由 于 闭 包 会 使 得 函数 中 的 变量 都 被 保存 在 内 存 中 ， 内 存 消耗 很 大 ， 所 以 不 能 滥用 闭 
包 ， 否 则 会 A 弛 导致 内 存 泄 露 。 解 决 方法 是 ， 
在 退出 函数 之 前 ， 将 不 使 用 的 局 部 变量 全 部 删除 。 

> 闭 包 会 在 父 函 数 外 部 改变 父 函 数 内 部 变量 的 值 。 所 以 ， 如 果 把 父 函 数 当 作对 象 使 
用 ， 把 闭 包 当 作 它 的 公用 方法 ， 把 内 部 变量 当 作 它 的 私有 属性 ， 这 时 一 定 要 小 心 ， 
不 要 随便 改变 父 函 数 内 部 变量 的 值 。 
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如 何 访问 函数 私有 变量 呢 ? 使 用 闭 包 的 运行 机 制 ， 在 函数 内 部 定义 “个 了 函数 ， 可 以 用 
子 函 数 访问 父 函 数 的 私有 变量 ， 执 行 完 操作 以 后 ， 将 子 函数 通过 return 返回 。 下 面 是 一 个 使 
用 闭 包 解决 实际 问题 的 典型 应 用 。 

型 应 用 实例 描述 如 
页 面 中 有 一 个 ul 列表 ， 列 表 有 6 个 列表 项 ， 要 求实 现 : 单 击 每 个 1 列表 项 ， 弹 出 这 个 工 
列表 项 所 对 应 的 序号 。 

HTML 代码 如 下 : 
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<ul> 
<li>11111< 几 > 
<]i>22222</i> 
<]i>33333</1i> 
<11>44444</li> 
<]i>55555</1i> 
</ul> 


这 个 题目 看 起 来 很 简单 ， 相 信 大 多 数 读者 可 以 很 快 写 出 以 下 代码 。 但 是 ， 通 过 正常 简单 
的 for 循环 实现 该 功能 存在 问题 。 


var lis = document.getElementsByTagName("li"); 
for(vari = 0;i<lis.length;i++ ){ 
lis[i].onclick = functionO{ 
alert(); 
} 
} 


上 述 代码 出 现 的 问题 ， 显 示 效 果 如 图 18-9 所 示 。 此 时 无 论 单 击 哪 一 个 1 列表 项 ， 阐 窗 
显示 的 序号 都 是 5。 

这 是 因为 代码 自 上 而 下 执行 完毕 后 ，li 的 onclick 还 没有 触发 ，for 循环 已 经 循环 完 。 由 
于 for 循环 没有 自己 的 作用 域 ， 所 以 循环 5 次 ， 用 的 是 同一 个 全 局 变量 i， 也 就 是 说 在 for 循 
环 转 完 之 后 ， 这 个 全 局 变量 i 已 经 变 成 了 $。 因 而 ， 在 单 击 fi 列表 项 的 时 候 ， 无 论 单 击 第 几 
个 ， i 都 是 5。 
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口 127.0.0.1:8020/ 教 材 /115 x = 
G | @ 127.0.0.1:8020/ 教 材 /19/07/03- 闭 包 实 例 -ul 列表 .html?_hbt=1512545694806 


写 二 这 里 导入 书签 ， 开 始 


127.0.0.1:8020 显示 : 


En: 





图 18-9 ” 闭 包 实例 的 问题 效果 显示 
要 解决 以 上 出 现 的 问题 ， 可 以 使 用 闭 包 来 解决 。 在 for 循环 外 面 代 套 了 一 层 自 执行 函 
数 ， 这 种 函数 套 函 数 的 形式 就 形成 了 闭 包 。 具 体 解决 代码 如 下 : 
/ 使 用 上 自 执行 函数 解决 ( 闭 包 ) 


var lis = document.getElementsByTagName("li"); 
for(var 1 = 0;i<lis.length;i++ ){ 
































!function( 1 ){ 
lis[il.onclick = function(){ 
alert(i+1); 
} 


} GOD; 
} 


问题 解决 后 的 显示 效果 如 图 18-10 所 示 。 














口 127.0.0.1:8020/ 教 材 /19 x > 
GG | ® 127.0.0.1:8020/ 教 材 /19/07/03- 闭 包 实 例 -ul 列表 .html?_hbt=1512546468382 


点 去 这 里 导入 书签 。 开始 至 
127.0.0.1:8020 显示 : 


11111 局 | 











图 18-10 闭 包 实例 的 问题 解决 效果 显示 


解决 原理 : 函数 具有 自己 的 作用 域 。for 循环 转 一 次 ， 创 建 一 个 自 执 行 函数 。 在 每 个 自 
执行 函数 中 ， 都 有 上 自己 独立 的 1， 而 不 会 被 释放 掉 。 所 以 for 循环 转 完 以 后 ， 创 建 的 5 个 自 执 
行 函数 的 作用 域 中 ， 分 别 存 储 了 5 个 不 同 的 i 变量 ， 从 而 解决 了 问题 。 





























is.s 章节 案例 ， 定义 一 个 URL 信息 操作 类 


定义 一 个 URL 信息 操作 类 ， 运 行 结果 如 图 18-11 所 示 。 这 个 类 具有 属性 和 方法 ， 具 体 
要 求 如 下 。 
属性 :url 名称， 例如 http:/www.JavaScript.com/index.js?username=J]S。 
方法 : 构造 方法 ， 给 url 属性 赋 初 始 化 值 。 
方法 一 : 返回 url 的 文件 名 ， 如 aphp、index.js。 
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第 18 章 JavaScript 面向 对 象 编程 





例 .htm1? hbt= 





例 .htm1? hbt= 











|.html? hbt=1514184 








方法 二 : 返回 ul 的 协议 名 ， 如 http:/、ftp:/。 
方法 三 : 返回 url 的 主机 名 ， 如 www.JavaScript.com。 
方法 四 : 返回 ur 的 文件 扩展 名 ， 如 js、php。 
ee es 

第 十 力 章 章节 案 从 |.html? hbt= 

第 十 九 章 章 节 案 

第 十 九 章 章 节 案 

弟 十 九 章 章 节 案 

图 18-11 案例 运行 结果 

【案例 代码 】 


<script type=" text/javascript"> 
function URL(urls){ 
this.urls = urls; 
var no = (this.urls).indexOf("?"); 


this.urlWithoutParams = (this.urls).substring(0,no); 
this.urlArr = (this.url WithoutParams).split("/"); 


this.getFileName = fonction(){ 


Var count = (this.urlArr).length; 
return (this.urlArr)[count-1]; 


} 
this.getXieyi = function(O{ 


return (this.urlArn[O]+"//"; 


} 

this.getHost = functionO{ 
return (this.urlArr)[2]; 

} 


this.getType = function(O){ 


var files = this.getFileName(); 


var con = files.indexOf("."); 


return files.substring(con+1); 


} 


var newUrls = new URL("http://www.JavaScript.com/index.js?username=JS"); 


console.log(newUrls.getFileName()); 
console.log(newUrls.getXieyi());// 调 


/ 调 


























console.log(newUrls.getHost()); // 调 
































| 方法 名 ， 返 回 ul 的 文件 名 





方法 名 ， 返 回 ul 的 协议 名 
方法 名 ， 返 回 url 的 主机 名 











console.log(mewUrls.getType0); // 调用 方法 名 ， 返 回 ul 的 文件 扩展 名 


</script> 


【章节 练习 】 
1， 写 出 下 面 代码 打印 出 的 结果 。 
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var fullname = ,John Doe'， 
var obj ={ 
fullname: 'Colin Ihrig', 
prop: { 
fullname: 'Aurelio De Rosa,', 
getFullname: function() { 
return this.fullname; 


}; 

var arr = [obj.prop.getFullname, 12,3,4,5]; 
console.log(arr[0]0); /2? 
console.log(obj.prop.getFullname()); //? 
var test = obj.prop.getFullname; 
console.log(testO); /W/W? 

obj.func = obj.prop.getFullname; 
console.log(obj.funcO); /1/? 


， 写 出 原型 链 的 指向 规则 。 
3， 写 出 一 个 简单 的 应 用 闭 包 的 代码 。 
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